Components

Chart

Recharts wrapper with Yuno theme tokens. ChartContainer provides the responsive box, plus ChartTooltip and ChartLegend re-exports. Bring your own <BarChart> / <LineChart> etc.

Updated Jul 10, 2026 by Leonardo Posada

Variants

<ChartContainer config={chartConfig} className="min-h-72 w-full">
  <BarChart data={data}>
    <CartesianGrid vertical={false} />
    <XAxis dataKey="month" />
    <Bar dataKey="live" fill="var(--color-live)" />
    <Bar dataKey="sandbox" fill="var(--color-sandbox)" />
  </BarChart>
</ChartContainer>

When to use

Dashboard KPI charts (line, bar, radial).
Health metrics visualizations.

When not to use

Single-value displays — use a KPI card instead.
Tiny sparklines with no interaction — SVG inline is lighter.

Usage

Wrap every chart with ChartContainer to inherit token colors.
Map series to config keys so tooltip labels resolve automatically.

Don't

Don't rely on the default recharts palette — use the config with tokens.