Search for a command to run...
Recharts wrapper with a typed `config` and consistent tooltip/legend chrome. Wraps any recharts visualization (area, bar, line, pie, etc.) in a tokenized container that animates on mount.
ChartContainer takes a typed config mapping each series key to a label and a
color (a design token — var(--chart-1) through var(--chart-5)). The config
generates --color-<key> CSS variables you reference inside the chart, and powers
the tooltip and legend labels. Bring the chart type itself (AreaChart, BarChart,
…) straight from recharts.
ChartContainer| Prop | Type | Default | Description |
|---|---|---|---|
config | ChartConfig | — | Maps each series key to { label, color?, icon?, theme? }. Emits --color-<key> CSS vars. |
children | ResponsiveContainer child | — | A single recharts chart element (AreaChart, BarChart, LineChart, PieChart, …). |
initialDimension | { width: number; height: number } | { 320, 200 } | First-paint size before the responsive container measures (avoids layout shift / SSR mismatch). |
className | string | — | Sizing lives here. Pass aspect-auto h-[240px] w-full for a fixed-height responsive chart. |
| Export | Purpose |
|---|---|
ChartTooltip | Re-export of recharts Tooltip. Pass content={<ChartTooltipContent />}. |
ChartTooltipContent | Tokenized tooltip body. Props: indicator (dot/line/dashed), hideLabel, nameKey, etc. |
ChartLegend | Re-export of recharts Legend. Pass content={<ChartLegendContent />}. |
ChartLegendContent | Tokenized legend row. Reads labels/icons from config. |
ChartStyle | Injects the --color-<key> variables. Rendered automatically by ChartContainer. |
Color series with the chart tokens — var(--chart-1) … var(--chart-5) (tangerine → sand) — set
in config, then reference the generated var(--color-<key>) inside the chart. They auto-invert
in dark mode.
Give ChartContainer a definite size via className — aspect-auto h-[240px] w-full. The inner
ResponsiveContainer needs a measurable parent, exactly like ScrollArea.
Keep axes quiet: tickLine={false}, axisLine={false}, a dashed CartesianGrid on
var(--border), and ticks at var(--muted-foreground) / fontSize: 12.
Let charts animate in. Recharts animates on mount by default; nudge with animationDuration
(~800–900ms) and animationEasing="ease-out" for the reveal.
Hard-code hex colors or raw Radix steps in fill / stroke. Always go through config + the
--color-<key> variable so theming and dark mode stay correct.
Hand-roll the tooltip or legend. Use ChartTooltipContent / ChartLegendContent so the chrome
matches the rest of the system.
Set a max-h and expect it to size — the responsive container can't resolve against an auto
height. Use a real height.