Components / Chart
Chart
The composable foundation every new Strata chart builds on: ChartContainer scopes a config that maps series keys to CSS variables, and the tooltip/legend pieces render themed. Recharts stays unwrapped; you compose its primitives directly.
import { ChartContainer, ChartTooltip, ChartTooltipContent, ChartLegend, ChartLegendContent, type ChartConfig } from '@layers/ui/chart'Rendered stock
House rules
- Config colors point at THEME TOKENS, never raw hex: var(--chart-series-1..6) for identity (which series is which), var(--chart-1..5) for a value ramp (magnitude). See the Chart colors ruling in docs/strata/tokens.md.
- Cap: 6 identity series. A 7th folds into "Other" rendered with --muted-foreground, never a generated hue. Assign colors to entities in fixed order, never to ranks.
- A legend is mandatory on every chart with 2 or more series (the pastels sit under 3:1 on light surfaces; the legend plus 2px strokes carry identity). A single series needs no legend; the title names it.
- One y-axis, always. Two measures of different scale get two charts, never a dual axis.
- Series reference their color as var(--color-<key>) in fill/stroke; ChartContainer emits those vars from the config.
- ChartContainer defaults to aspect-video; canvas panes that size by row pass an explicit height class (aspect-auto h-[N] w-full) — the sanctioned one-off layout constraint.
- Status colors (--warning, --destructive, --brand-green-success) are never used as series colors.
- TrendChart and RateChart predate this layer and stay as they are; new charts build here (PaceChart is the reference consumer).
- To let the reader switch series off, pass ChartLegendContent onItemClick (called with the series config key) and hiddenKeys, and set hide on that series. Each item becomes a toggle button; a hidden series keeps its item, dimmed, so it can always come back. Without onItemClick the legend is a static key.