Chart Config

Every Honest UI chart accepts a config prop. Pass it a ChartConfig object that maps data keys to visible labels, theme colors, and optional icons used by tooltips and legends.

import { type ChartConfig } from "honestui/charts";

const chartConfig = {
  harvested: {
    label: "Harvested",
    icon: WheatIcon,
    colors: {
      light: ["#047857"],
      dark: ["#10b981"],
    },
  },
  packed: {
    label: "Packed",
    icon: PackageCheckIcon,
    colors: {
      light: ["#be123c"],
      dark: ["#f43f5e"],
    },
  },
} satisfies ChartConfig;

Each key, such as harvested or packed, must match a data key used by the corresponding series. The object has this type:

type ChartConfig = Record<
  string,
  {
    label?: React.ReactNode;
    icon?: React.ComponentType;
    colors?: {
      light?: string[];
      dark?: string[];
    };
  }
>;

label

The name shown in tooltips and legends. Use a concise label that makes sense outside the chart.

const chartConfig = {
  harvested: {
    label: "Harvested", 
    // ...
  },
} satisfies ChartConfig;

colors

Theme-aware color arrays. Provide at least one theme key (light or dark); each holds an array of CSS color strings.

Use one color per theme for a solid fill:

colors: {
  light: ["#047857"],
  dark: ["#10b981"],
}

Use multiple colors to create a gradient. The chart distributes the stops across the rendered series:

colors: {
  light: ["#a855f7", "#6366f1", "#3b82f6"],
  dark: ["#f43f5e", "#ec4899", "#a855f7", "#6366f1", "#3b82f6"],
}

Light and dark themes may define different numbers of color stops. The chart uses the larger count when distributing them.

icon

An optional React component that replaces the default color indicator in the tooltip and legend. Icons can reinforce a distinction, but visible labels must still identify each series.

import { PackageCheck, Wheat } from "honestui/icons";

const chartConfig = {
  harvested: {
    label: "Harvested",
    icon: Wheat, 
    colors: { light: ["#047857"], dark: ["#10b981"] },
  },
  packed: {
    label: "Packed",
    icon: PackageCheck, 
    colors: { light: ["#be123c"], dark: ["#f43f5e"] },
  },
} satisfies ChartConfig;

The icon replaces the color indicator in tooltips and legends. Tooltips render it at h-2.5 w-2.5; legends render it at h-3 w-3.

The chart config generates CSS custom properties scoped to each chart instance. A key harvested with colors ["#a855f7", "#6366f1"] produces:

--color-harvested-0: #a855f7;
--color-harvested-1: #6366f1;

Chart components, tooltips, and legends read these variables. When the application changes between the supported light and dark themes, the chart reads the corresponding values.

Color Distribution

When you provide fewer colors than segments need, they're evenly distributed across slots:

• 2 colors for 4 slots: [red, red, pink, pink]
• 3 colors for 4 slots: [red, pink, blue, blue]

Use enough stops to communicate the intended progression, then verify the result with representative data in both themes.

The config is validated at runtime. An empty colors object, or one without a valid theme key, throws a clear error:

[Honest UI] Invalid chart config for "harvested": colors object must
have at least one theme key (light, dark). Received empty object or
invalid keys.

Default (Labels + Colors)

Labels and theme-aware colors. The label shows in the tooltip and legend; the colors control the fill.

Component ex-chart-config-default-bar-chart not found in registry. Contact the developer to add it. open an issue

With Icons

Pass an icon component per entry to replace the default color indicator in the tooltip and legend.

Component ex-chart-config-icons-bar-chart not found in registry. Contact the developer to add it. open an issue

Gradient Colors

Pass multiple colors per theme for gradient fills. Each array value is a stop distributed across the chart elements.

Component ex-gradient-colors-bar-chart not found in registry. Contact the developer to add it. open an issue