Chart
Themed recharts wrapper with config-driven colors and tooltips.
The chart primitives wrap recharts with the app's
design tokens. ChartContainer takes a typed config mapping each series key to
a label and a --color-<key> CSS variable, so bars, lines, and tooltips pick up
on-brand colors automatically. ChartTooltip / ChartTooltipContent and
ChartLegend / ChartLegendContent render the config-aware overlays.
Preview
'use client';import { Bar, BarChart, CartesianGrid, XAxis } from 'recharts';import { ChartContainer, ChartTooltip, ChartTooltipContent, type ChartConfig,} from '@web/components/ui/chart';const data = [ { day: 'Mon', calls: 320 }, { day: 'Tue', calls: 540 }, { day: 'Wed', calls: 410 }, { day: 'Thu', calls: 620 }, { day: 'Fri', calls: 790 }, { day: 'Sat', calls: 280 }, { day: 'Sun', calls: 190 },];const chartConfig = { calls: { label: 'API calls', color: 'var(--chart-1)' },} satisfies ChartConfig;export default function ChartDemo() { return ( <ChartContainer config={chartConfig} className="min-h-48 w-full max-w-md"> <BarChart accessibilityLayer data={data}> <CartesianGrid vertical={false} /> <XAxis dataKey="day" tickLine={false} axisLine={false} tickMargin={8} /> <ChartTooltip content={<ChartTooltipContent />} /> <Bar dataKey="calls" fill="var(--color-calls)" radius={4} /> </BarChart> </ChartContainer> );}Import
import {
ChartContainer,
ChartTooltip,
ChartTooltipContent,
type ChartConfig,
} from "@/components/ui/chart";Compose the recharts primitives (BarChart, Bar, XAxis, …) as children of
ChartContainer; reference each series' color with var(--color-<key>).
Props
ChartContainer accepts native <div> attributes plus a required config and
an optional initialDimension. The table is generated at build time from the
real ChartContainerProps type in the apps/web source. The config value is
typed by ChartConfig (label + color/theme per series key).
Prop
Type