Chart
Accessible, composable charts built on Recharts. Wrap any Recharts chart in ChartContainer and pass a ChartConfig to wire up colors, labels, and tooltips from your design tokens.
Anatomy
Define a ChartConfig that maps each data key to a label and a color token. Pass it to ChartContainer alongside your Recharts chart. ChartTooltip and ChartLegend consume the config automatically via context. Reference colors inside the chart as var(--color-KEY).
Bar Chart — Ventas por País
Grouped bar chart comparing café, aguacate, and cacao sales (in tonnes) across five Latin American countries. Uses ChartLegend with ChartLegendContent for an auto-labeled legend driven by the config.
Line Chart — Tendencia de Exportaciones
Monthly export trend for the top three LatAm products in the first half of 2024. Dot rendering is disabled for a cleaner look at high data density.
Area Chart — Ingresos Acumulados por País
Stacked area chart showing quarterly revenue (USD thousands) across Brasil, México, and Colombia. The shared stackId stacks the three series into a single cumulative shape.
Donut Chart — Participación de Mercado
Donut chart showing the market share distribution of Latin American export products in 2024. Colors are set per-segment via Cell and a custom inline legend is rendered below the chart.
Design Guidelines
Do
- Use CSS variables for colors. Reference
var(--color-KEY)inside charts so colors adapt to light/dark mode automatically. - Set a height class on ChartContainer. Always provide a
h-*oraspect-*class to avoid a zero-height render. - Include tooltips and legends. They are the primary way users read precise chart values.
Don't
- Don't hardcode hex or hsl colors. Use
hsl(var(--chart-N))fromglobals.cssinstead. - Don't use ChartContainer in a Server Component. Recharts requires the DOM — always co-locate charts inside
"use client"files. - Don't overcrowd a single chart. Split into multiple charts rather than showing more than 5 data series at once.
Developer Reference
ChartConfig
A Record<string, …> where each key matches a Recharts dataKey. Each entry accepts label, color (a single CSS value), or theme (an object with light / dark values).
Color scoping
ChartStyle injects a <style>tag scoped to the chart's unique ID. Inside the chart, reference colors as var(--color-KEY) — these are not global tokens and are available only within the chart container.
Accessibility
Recharts charts are SVG-based. Add an aria-label to the ChartContainerwrapper and provide a text summary of the chart's key insight for screen reader users.
Usage
import { BarChart, Bar, XAxis, CartesianGrid } from "recharts";
import {
ChartContainer,
ChartTooltip,
ChartTooltipContent,
type ChartConfig,
} from "@/components/ui/chart";
const config: ChartConfig = {
cafe: { label: "Café", color: "hsl(var(--chart-1))" },
aguacate: { label: "Aguacate", color: "hsl(var(--chart-2))" },
};
const data = [
{ country: "Colombia", cafe: 4200, aguacate: 1800 },
{ country: "Brasil", cafe: 6100, aguacate: 900 },
];
<ChartContainer config={config} className="h-64 w-full">
<BarChart data={data}>
<CartesianGrid vertical={false} />
<XAxis dataKey="country" />
<ChartTooltip content={<ChartTooltipContent />} />
<Bar dataKey="cafe" fill="var(--color-cafe)" radius={4} />
<Bar dataKey="aguacate" fill="var(--color-aguacate)" radius={4} />
</BarChart>
</ChartContainer>