A set of chart primitives that wrap Recharts with Primstack token integration. ChartContainer provides scoped CSS variable theming, ChartTooltipContent renders styled tooltips with series labels, and ChartLegendContent shows color-coded legends. All chart colors automatically adapt to the active personality and light/dark mode via CSS custom properties.
Area chart
import { ChartContainer, ChartTooltip, ChartTooltipContent } from '@primstack/ui/chart'
import { AreaChart, Area, XAxis, CartesianGrid } from 'recharts'
const config = {
desktop: { label: 'Desktop', color: 'var(--color-chart-series1)' },
mobile: { label: 'Mobile', color: 'var(--color-chart-series2)' },
}
<ChartContainer config={config}>
<AreaChart data={data}>
<CartesianGrid vertical={false} />
<XAxis dataKey="month" />
<ChartTooltip content={<ChartTooltipContent />} />
<Area dataKey="desktop" fill="var(--color-desktop)" stroke="var(--color-desktop)" />
<Area dataKey="mobile" fill="var(--color-mobile)" stroke="var(--color-mobile)" />
</AreaChart>
</ChartContainer>Treemap
import { ChartContainer, TreemapCell, ChartTooltip, ChartTooltipContent } from '@primstack/ui/chart'
import { Treemap } from 'recharts'
<ChartContainer config={config}>
<Treemap data={data} dataKey="value"
content={<TreemapCell showLabel radius={4} />}
>
<ChartTooltip content={<ChartTooltipContent />} />
</Treemap>
</ChartContainer>Scatter / Bubble
import { ChartContainer, ScatterDot } from '@primstack/ui/chart'
import { ScatterChart, Scatter, XAxis, YAxis, ZAxis } from 'recharts'
<ChartContainer config={config}>
<ScatterChart>
<XAxis type="number" dataKey="x" />
<YAxis type="number" dataKey="y" />
<ZAxis type="number" dataKey="z" range={[40, 400]} />
<Scatter data={data} fill="var(--color-products)"
shape={<ScatterDot zDataKey="z" fillOpacity={0.6} />}
/>
</ScatterChart>
</ChartContainer>Radial bar with center label
import { ChartContainer, RadialBarCenterLabel } from '@primstack/ui/chart'
import { RadialBarChart, RadialBar, PolarAngleAxis, Label } from 'recharts'
<ChartContainer config={config} className="aspect-square max-h-[250px]">
<RadialBarChart data={[{ progress: 72 }]} startAngle={90} endAngle={-270}
innerRadius={80} outerRadius={110}>
<PolarAngleAxis type="number" domain={[0, 100]} tick={false} />
<RadialBar dataKey="progress" background cornerRadius={10} />
<Label content={<RadialBarCenterLabel value="72%" label="Complete" />} />
</RadialBarChart>
</ChartContainer>