Chart

shadcn-style chart kit built on Recharts. ChartContainer scopes series colours as --color-<key> CSS custom properties. ChartTooltip and ChartTooltipContent render token-styled tooltips. ChartLegend and ChartLegendContent render colour-dotted legend rows. Pair with any Recharts chart type.

Preview

Installation

bash

npx shadcn@latest add @layout/chart

Usage

tsx

import { ChartContainer, ChartTooltip, ChartTooltipContent, ChartLegend, ChartLegendContent } from "@/registry/layout/chart/chart";

Examples

Area chart: traffic channels

Guidelines for AI agents

Wrap any Recharts chart in ChartContainer with a config map (keys match Recharts dataKey values, each entry has label and color). Reference colours in Recharts props as var(--color-<key>). Pass ChartTooltipContent to Recharts Tooltip's content prop and ChartLegendContent to Legend's content prop, passing the same config to both so labels and colours stay consistent.

Never

Neverhardcode hex or rgb colours in config entries; always use a var(--layout-*) token reference
Neveruse the same --color-<key> name across two ChartContainers on the same page unless the colours are intentionally identical
Neverpass config keys that do not match the Recharts dataKey values; colours will not resolve
Neverrender ChartContainer without a ResponsiveContainer child; without it the chart will not adapt to its parent width

Tokens consumed

--layout-primary--layout-success--layout-warning--layout-danger--layout-muted-fg--layout-border--layout-surface--layout-overlay--layout-fg--layout-radius--layout-shadow-md