# Chart frame

The frame every chart sits in: title, subtitle, range control, legend, the plot (line, bar, funnel), a crosshair tooltip, a table view toggle and the footer source. Palette `--chart-1..5` in order, never cycled; previous period dotted in `--chart-muted`.

- **Group:** Data display · **family:** `data-display` · **shadcn:** Chart, ToggleGroup
- **Build:** shadcn `chart` (`ChartContainer`, `ChartTooltip`, `ChartLegend`, Recharts).
- **In apps/admin today:** Not in apps/admin.
- **Client component:** yes. 

## Content rules

- Title says the measure and unit ("Revenue, GBP").

## Do

- Direct-label lines.
- Use `--chart-1` for one series.

## Don't

- Status colours as series.
- Cycle the palette past 5.

## Accessibility

- **Keyboard:** ← → move the crosshair point; the table view is the accessible alternative.
- **ARIA:** SVG `role="img"` with a summary `aria-label`; table view is a real table.
- **Focus:** Plot is one focus stop.

## Tokens

`--s-2` `--s-3` `--r-chip` `--foreground` `--motion-skeleton` `--chart-1` `--card` `--border` `--r-card` `--s-4` `--w-semibold` `--text-section` `--lh-section` `--font-voice` `--font-stretch-title` `--tr-section` `--text-small` `--muted-foreground` `--chart-muted` `--text-micro` `--font-ui` `--secondary-border` `--motion-hover` `--popover` `--e-pop` `--pop-shift` `--motion-pop-out` `--motion-pop-in` `--s-1` `--chart-2` `--chart-3` `--muted` `--r-control` `--ring` `--w-medium` `--font-code` `--chart-4` `--chart-5` `--text-hero`

## Files

`chart-frame.html` live specimen · `chart-frame.css` kit rules · `chart-frame.d.ts` props · full page: `docs/components/chart-frame/` (phone: `m/`).