Chart
A chart component built on recharts joins the library. A single config object drives series colors, and themed tooltip, legend, grid, and axis presets replace the recharts defaults, so bar, line, area, and pie charts match the rest of the design system out of the box.
What's new
Config-Driven Colors
Declare a ChartConfig with a label and color per series, and the Chart container exposes each key as a --color-{key} CSS variable. Any recharts series can reference it with fill="var(--color-desktop)", and the tooltip and legend read the same config for their labels. Five monochrome --chart-1 through --chart-5 tokens ship with the theme and resolve correctly in both light and dark mode.
1 npx drivn add chart
Themed Presets
Chart.Tooltip, Chart.Legend, Chart.Grid, and Chart.XAxis wrap the recharts primitives with Drivn styling and sensible defaults: card-surfaced tooltip content, a swatch-and-label legend, horizontal-only grid lines, and axes without tick or baseline strokes. Every preset spreads its props, so any recharts option still overrides the default.
Documented Variants
The docs page walks through bar, stacked bar, line, area, pie, and donut charts, plus an interactive example that switches the visible series with Tabs. Each code tab is a complete file with its data and config, ready to paste.