Every ChartCN chart accepts a config object. It maps each series data key to display metadata shared by the plot, tooltip, and legend.
Structure
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.
type ChartConfig = Record<
string,
{
label?: React.ReactNode;
icon?: React.ComponentType;
colors?: {
light?: string[];
dark?: string[];
};
}
>;Properties
label
The name shown in tooltips and legends. It accepts a string, number, or any other ReactNode. When omitted, ChartCN uses the data key.
const chartConfig = {
desktop: {
label: "Desktop Users", // [!code highlight]
colors: { light: ["#047857"], dark: ["#10b981"] },
},
} satisfies ChartConfig;colors
Theme-aware arrays of CSS colors. Provide a light value, a dark value, or both.
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
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.
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
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.
<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
It is valid to define only one theme. ChartCN reuses that value in the other theme.
const chartConfig = {
desktop: {
label: "Desktop",
colors: {
light: ["#047857"],
},
},
} satisfies ChartConfig;Examples
Default (Labels + Colors)
With Icons
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. |