# Chart Config

Define labels, colors, and icons for every data series.

> For the complete documentation index, see [llms.txt](/llms.txt). Markdown variants are available by appending `.md` to any URL or sending an `Accept: text/markdown` header. An agent skill is available at [/.well-known/agent-skills/site-skill.md](/.well-known/agent-skills/site-skill.md).





Every ChartCN chart accepts a `config` object. It maps each series data key to display metadata shared by the plot, tooltip, and legend.

## Structure [#structure]

```tsx
import type { ChartConfig } from "@/components/chart/chart";

const chartConfig = {
  desktop: {
    label: "Desktop",
    icon: MonitorIcon,
    colors: {
      light: ["#047857"],
      dark: ["#10b981"],
    },
  },
  mobile: {
    label: "Mobile",
    icon: SmartphoneIcon,
    colors: {
      light: ["#be123c"],
      dark: ["#f43f5e"],
    },
  },
} satisfies ChartConfig;
```

Each key must match a series `dataKey` in the dataset. ChartGPU and PixiJS use the same config shape.

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

## Properties [#properties]

### label [#label]

The name shown in tooltips and legends. It accepts a string, number, or any other `ReactNode`. When omitted, ChartCN uses the data key.

```tsx
const chartConfig = {
  desktop: {
    label: "Desktop Users", // [!code highlight]
    colors: { light: ["#047857"], dark: ["#10b981"] },
  },
} satisfies ChartConfig;
```

### colors [#colors]

Theme-aware arrays of CSS colors. Provide a `light` value, a `dark` value, or both.

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

ChartCN resolves the active theme first. If that theme has no colors, it falls back to the other theme. When neither theme supplies a color, the series uses slate (`#64748b`).

The first resolved color is the primary series color used by the current chart primitives. Keeping colors in arrays leaves the config compatible with multi-stop renderer styles without changing its public shape.

### icon [#icon]

An optional React component that replaces the default color indicator in legends. It is useful when series should remain distinguishable without relying on color alone.

```tsx
import { Monitor, Smartphone } from "lucide-react";

const chartConfig = {
  desktop: {
    label: "Desktop",
    icon: Monitor, // [!code highlight] [!code word:Monitor]
    colors: { light: ["#047857"], dark: ["#10b981"] },
  },
  mobile: {
    label: "Mobile",
    icon: Smartphone, // [!code highlight] [!code word:Smartphone]
    colors: { light: ["#be123c"], dark: ["#f43f5e"] },
  },
} satisfies ChartConfig;
```

## How Colors Work [#how-colors-work]

The active renderer resolves the config when it builds the chart option. A theme change rebuilds the option with the correct color without changing the chart data or component tree.

```tsx
<ChartcnLineChart config={chartConfig} data={data} xDataKey="month">
  <ChartcnLineChart.Legend />
  <ChartcnLineChart.Tooltip />
  <ChartcnLineChart.Line dataKey="desktop" />
  <ChartcnLineChart.Line dataKey="mobile" />
</ChartcnLineChart>
```

The same resolved value is passed to the series, legend marker, tooltip marker, active dot, and Brush miniature so they stay visually consistent.

### Theme Fallback [#theme-fallback]

It is valid to define only one theme. ChartCN reuses that value in the other theme.

```tsx
const chartConfig = {
  desktop: {
    label: "Desktop",
    colors: {
      light: ["#047857"],
    },
  },
} satisfies ChartConfig;
```

## Examples [#examples]

### Default (Labels + Colors) [#default-labels--colors]

<ComponentPreview base="chartgpu" name="bar-chart-demo" title="Basic chart config">
  <BarChartDemo />
</ComponentPreview>

### With Icons [#with-icons]

<ComponentPreview base="chartgpu" name="chart-config-icons-bar-chart-demo" title="Chart config with icons">
  <ChartConfigIconsBarChartDemo />
</ComponentPreview>

## API Reference [#api-reference]

| Property | Type                                    | Default         | Description                                             |
| -------- | --------------------------------------- | --------------- | ------------------------------------------------------- |
| `label`  | `ReactNode`                             | Series data key | Name displayed by legends and tooltips.                 |
| `colors` | `{ light?: string[]; dark?: string[] }` | Slate color     | Theme-aware CSS colors used by the series and UI parts. |
| `icon`   | `ComponentType`                         | Color marker    | Component rendered in place of the legend indicator.    |