Chart

Recharts wrapped in the shadcn chart container — series colors from theme tokens.

Bar

const config = {
  words: { label: "Words written", color: "var(--c-accent)" },
  notes: { label: "Notes", color: "var(--c-info)" },
} satisfies ChartConfig;

<ChartContainer config={config} className="h-56 w-full">
  <BarChart accessibilityLayer data={data}>
    <CartesianGrid vertical={false} />
    <XAxis dataKey="month" tickLine={false} axisLine={false} />
    <ChartTooltip content={<ChartTooltipContent />} />
    <ChartLegend content={<ChartLegendContent />} />
    <Bar dataKey="words" fill="var(--color-words)" radius={4} />
    <Bar dataKey="notes" fill="var(--color-notes)" radius={4} />
  </BarChart>
</ChartContainer>

Charts wrap Recharts via the shadcn ChartContainer; series colors come from theme tokens, so they follow light and dark.

Custom tooltip & legend

<ChartTooltip content={
  <ChartTooltipContent
    indicator="line"
    labelFormatter={(v) => v + " — notes activity"}
    formatter={(value, name) => (
      <span className="flex justify-between gap-4">
        <span>{name}</span><span>{value} notes</span>
      </span>
    )}
  />
} />
<ChartLegend content={<ChartLegendContent className="font-mono text-xs" />} />

Custom tooltip: ChartTooltipContent takes an indicator style, a labelFormatter, and a per-row formatter that renders arbitrary markup. Custom legend: ChartLegendContent accepts a nameKey and extra classes.

Markdown for agents: /design/chart.md · spec: /design.md