How to Add a Chart to a React App

Drivn assumes three things in your React project: Tailwind CSS v4 processing your stylesheets, TypeScript configured (the component ships as a .tsx file with typed config and props), and a @/ path alias pointing at your source directory. Projects created with npx drivn@latest create have all three, plus the drivn.config.json the CLI reads to find your components folder and globals stylesheet. If you started from create-next-app or npm create vite, run npx drivn@latest create inside the project once before adding components — the Chart install step needs that config to know where to append its color tokens. The installation page lists the minimal setup for each starter. You do not need to install recharts yourself; the CLI handles it.

Run npx drivn add chart from the project root. The CLI writes chart.tsx into your components directory, installs recharts with whichever package manager it detects from your lockfile, and appends a block of chart tokens to your globals stylesheet: --chart-1 through --chart-5 for light mode, an inverted ramp under [data-theme="dark"], and --color-chart-* aliases inside @theme inline. If those tokens already exist, the step is skipped with a warning instead of duplicating CSS. Nothing else is added — no provider to mount, no global config object, no runtime UI dependency beyond recharts itself. The installed file is yours to edit like any other component; the CLI docs describe the flags for custom install paths.

Every Drivn chart starts with a config object keyed by the series names in your data. Each entry can hold a label (any ReactNode, shown in the tooltip and legend), a color (any CSS color, usually one of the var(--color-chart-N) tokens), and an optional icon component for the legend. The Chart root reads this object and sets a CSS variable per colored key on its wrapper — desktop becomes --color-desktop, mobile becomes --color-mobile — so the series elements you render in the next step reference a variable instead of a hard-coded value. Writing the object with satisfies ChartConfig gives you autocomplete on the field names while keeping the literal keys intact for TypeScript. The Chart docs list every config field.

Wrap one recharts chart element in <Chart config={config}>. The root renders a full-width wrapper at a 16:9 aspect-video ratio with a 200 pixel minimum height, places your chart inside recharts' ResponsiveContainer, and provides the config through context. Inside the recharts element, mix Drivn pieces with plain recharts series: Chart.Grid and Chart.XAxis carry the quiet defaults, while Bar comes straight from recharts and points its fill at the variable the root created. Because the Chart file starts with 'use client', it works as-is in Vite and renders as a client component in a Next.js App Router project. To change the size, pass className="aspect-auto h-64" — the root merges classes through cn. More layouts live on the React Chart examples page.

Drop Chart.Tooltip and Chart.Legend inside the recharts element. The tooltip renders Chart.TooltipContent on a bg-card panel with a border and shadow: the axis label as a heading, then one row per series with a color indicator, the config label, and the value formatted with toLocaleString(). Pass content={<Chart.TooltipContent indicator="line" />} for a thin bar instead of a dot, or hideLabel to drop the heading. The legend defaults to the bottom of the plot; set verticalAlign="top" to move it. When a config entry has an icon, the legend renders that component in place of the color swatch — pass the component itself, such as Monitor from lucide-react, not a JSX element. For styling details, compare with Drivn vs shadcn/ui Chart.

Changing the chart type is a matter of swapping recharts primitives; the Chart wrapper and config stay the same. For a trend line, replace BarChart and Bar with LineChart and Line, setting stroke to the series variable. An area chart works the same way with AreaChart and Area, using a low fillOpacity so grid lines show through. Pie and donut charts are the one structural change: they have no axes, so leave out Chart.Grid and Chart.XAxis, give each data row its own fill such as var(--color-chrome), and set nameKey so the tooltip and legend look up labels by slice name. Adding innerRadius to the Pie turns it into a donut. Each variant is shown in full in the Chart examples.

With one chart working, the same config-and-wrapper pattern covers the rest of a dashboard. Read the Chart reference for every sub-component prop, including Chart.TooltipContent and Chart.LegendContent when you want to pass them explicitly. To let users switch series, pair the chart with the compact Tabs variant and feed the active key into dataKey — the interactive example on the examples page shows the full wiring. Frame each chart in a Card for consistent dashboard tiles, and adjust the --chart-* token values from Theming to bring the palette in line with your brand. If you are on the App Router, the Next.js Chart guide shows server-side data loading.