Chart
Charts powered by recharts with config-driven colors, themed tooltip, and legend.
Preview
Installation
npx drivn add chartUsage
Declare a config with satisfies ChartConfig, then reference each key as var(--color-{key}) on any recharts series.
1 import { Chart, type ChartConfig } from "@/components/ui/chart" 2 import { Bar, BarChart } from "recharts" 3 4 const data = [ 5 { month: "Jan", desktop: 186, mobile: 80 }, 6 { month: "Feb", desktop: 305, mobile: 200 }, 7 { month: "Mar", desktop: 237, mobile: 120 }, 8 { month: "Apr", desktop: 73, mobile: 190 }, 9 { month: "May", desktop: 209, mobile: 130 }, 10 { month: "Jun", desktop: 214, mobile: 140 }, 11 ] 12 13 const config = { 14 desktop: { label: "Desktop", color: "var(--color-chart-1)" }, 15 mobile: { label: "Mobile", color: "var(--color-chart-3)" }, 16 } satisfies ChartConfig 17 18 export default function Page() { 19 return ( 20 <Chart config={config}> 21 <BarChart data={data}> 22 <Chart.Grid /> 23 <Chart.XAxis dataKey="month" /> 24 <Chart.Legend /> 25 <Chart.Tooltip /> 26 <Bar dataKey="desktop" fill="var(--color-desktop)" radius={4} /> 27 <Bar dataKey="mobile" fill="var(--color-mobile)" radius={4} /> 28 </BarChart> 29 </Chart> 30 ) 31 }
Stacked Bar
Share a stackId across series and round only the top segment.
Line
Use indicator="line" on the tooltip content to match the series stroke.
Area
Reuse the series color for the fill and soften it with fillOpacity.
Pie
Each data row carries its own fill; nameKey maps rows to config entries.
Donut
Add innerRadius and a centered Label for a total.
Interactive
Drive dataKey from state to switch series without remounting the chart.
API Reference
Chart
| Prop | Type | Default | Description |
|---|---|---|---|
config | ChartConfig | — | Series map: label, optional icon, and color exposed as --color-{key} |
children | ReactElement | — | A single recharts chart (BarChart, LineChart, PieChart, etc.) |
className | string | — | Additional CSS classes for the container (override size with aspect-* or h-*) |
ChartConfig
| Prop | Type | Default | Description |
|---|---|---|---|
label | ReactNode | — | Display name used in tooltip and legend |
icon | ComponentType<{ className?: string }> | — | Icon rendered in the legend instead of a color swatch |
color | string | — | Any CSS color, typically var(--color-chart-1) through var(--color-chart-5) |
Chart.Grid
| Prop | Type | Default | Description |
|---|---|---|---|
vertical | boolean | false | Draw vertical grid lines |
horizontal | boolean | true | Draw horizontal grid lines |
Chart.XAxis
| Prop | Type | Default | Description |
|---|---|---|---|
dataKey | string | — | Field in each data row used for tick labels |
tickLine | boolean | false | Draw a small line at each tick |
axisLine | boolean | false | Draw the axis baseline |
Chart.Tooltip
| Prop | Type | Default | Description |
|---|---|---|---|
content | ReactElement | <Chart.TooltipContent /> | Custom tooltip renderer |
cursor | boolean | object | false | Show the hover cursor behind the active bar or line |
Chart.TooltipContent
| Prop | Type | Default | Description |
|---|---|---|---|
hideLabel | boolean | false | Hide the axis label heading |
indicator | "dot" | "line" | "dot" | Shape of the color indicator next to each series |
className | string | — | Additional CSS classes for the tooltip panel |
Chart.Legend
| Prop | Type | Default | Description |
|---|---|---|---|
content | ReactElement | <Chart.LegendContent /> | Custom legend renderer |
verticalAlign | "top" | "bottom" | "bottom" | Legend placement relative to the plot area |
Chart.LegendContent
| Prop | Type | Default | Description |
|---|---|---|---|
className | string | — | Additional CSS classes for the legend row |