Usage & config
Data is an array of rows. A
config object names the series, their labels, colours and looks.Data + config
Each key of config is a column in your rows. Leave out color to take the next palette colour.
tsx
const data = [ { month: "Jan", desktop: 186, mobile: 80 }, { month: "Feb", desktop: 305, mobile: 200 },]; const config = { desktop: { label: "Desktop", color: "#6366f1" }, mobile: { label: "Mobile", // per-series fill pattern, stroke and glow variant: "hatched", strokeVariant: "dashed", glow: true, },} satisfies ChartConfig;Pick a subset
Use keys to draw only some series, in a given order, without changing config.
tsx
<LineSeriesChart data={data} config={config} xKey="month" keys={["mobile"]}/>Formatting
tsx
<BarSeriesChart data={data} config={config} xKey="month" formatValue={(v) => `$${v.toLocaleString()}`} formatLabel={(m) => m.slice(0, 3)}/>Cards
ChartCard gives the shadcn-style frame: title, description, an action slot (toggles) and a footer caption with trend.
tsx
<ChartCard title="Bar Chart - Interactive" description="Showing total visitors for the last 3 months" action={<RangeToggle />} trend={{ value: 5.2, label: "this month" }} caption="January – June 2026"> <BarSeriesChart ... /></ChartCard>Did you like the content?