Theming

Colour tokens

All chart components reference five CSS custom properties for their colour palette:

Override them at any scope:

:root {
  --chart-1: #3b82f6;
  --chart-2: #10b981;
  --chart-3: #f59e0b;
}

Per-series colours

Every series config object (bars, lines, grids, movingAverages) accepts an optional color prop that overrides the palette for that specific series:

<MixedLineBarChart
  data={data}
  xKey="month"
  bars={[
    { key: "sales", label: "Sales", color: "#e11d48" },
    { key: "returns", label: "Returns", color: "#6366f1" },
  ]}
  lines={[]}
  height={360}
/>

Dark mode

Define dark-mode tokens under a .dark selector. The charts automatically pick up the active set:

.dark {
  --chart-1: oklch(0.488 0.243 264.376);
  --chart-2: oklch(0.696 0.17 162.48);
  --chart-3: oklch(0.769 0.188 70.08);
  --chart-4: oklch(0.627 0.265 303.9);
  --chart-5: oklch(0.645 0.246 16.439);
}

shadcn/ui compatibility

chartcn components also reference standard shadcn/ui tokens like --background, --foreground, --card, --border, --muted, and --destructive. Any shadcn/ui theme will work out of the box.

ChartShell theming

The ChartShell wrapper uses the Card component from shadcn/ui, inheriting --card and --card-foreground. You can target it with the [data-slot="chart-shell"] attribute:

[data-slot="chart-shell"] {
  --card: oklch(0.97 0 0);
  border-radius: 1rem;
}