ChartLegend
- Status
- Specified
- Family
- 7 of 13
ChartLegend is specified but not yet built. The spec below is the contract it will be built against — reviewed before the code, which is the order that makes the review worth doing. See the roadmap for where it lands.
The four-layer spec
Interactive: click to isolate a series, keyboard-navigable, aria-pressed state. Positioned below on phone as a wrapping row. Series colors are assigned by a stable key hash, never by array index, so a category is the same color in the dashboard and the drill-down.
Lifted verbatim from Dashboard & charts. The doc and this page are the same paragraphs, so they cannot disagree.
Also in Dashboard & charts
- DashboardShellResponsive grid with optional rearrange.
- KpiRow2–4 KPI cards with aligned baselines.Spec
- MoneyChartLine/area with a money axis and negative-aware baseline.
- MoneyBarChartGrouped/stacked, zero-baseline origin, hatched negatives.
- WaterfallChartThe P&L bridge. Essential and rare.
- CategoryBreakdownRanked bars, not a pie.
- CashCalendarDaily heatmap of cash movement.
- CandlestickChartFor FX/crypto pairs.
- ChartTooltipTouch-persistent readout.Spec
- DataTableToggleEvery chart's accessible table equivalent.Spec
See also
A component is specified in one place, defined in another, and running in a third. All three, from here.
- Dashboard & charts — the family specThe four-layer specification this component was built against, before it was written.Doc
- Financial charts for React: waterfalls and sparklinesThe family running, with real figures in it, in both themes and at every density.Live
- CatalogAll 179 components, specified before they are written.Doc
Elsewhere in the system
Where ChartLegend sits in the rest of the system — the live section it renders in, the calculators that compute what it displays, and the ledger payloads it is fed from.
Components are copied into your repository and meant to be edited — rounding policy, fiscal calendar and compliance copy differ per company.
Told when Dashboard & charts changes
Components are copied into your repo, so a fix here does not reach you on its own. One email when a component in this family changes in a way that needs a migration — and nothing when it does not.