/// Charts
ChartLegend
A compact swatch-and-label legend row: 8px squares with mono-UPPERCASE muted labels.
import { ChartLegend } from "@protocore/pds";Import path
ChartLegend ships from the `@protocore/pds/charts` subpath. Unlike the chart wrappers it has no recharts dependency — it is a plain server-safe row — but it is grouped with the charts family on the subpath.
import { ChartLegend } from "@protocore/pds/charts";Basics
Pass items, one per series in order. Each renders an 8px square swatch — defaulting to --pds-chart-N by position, matching how the wrappers color series — beside a mono-UPPERCASE muted label. Drop it into a ChartContainer's legend slot.
Custom swatch colors
Override color per item to map labels to specific ramp slots — e.g. green for healthy, amber for degraded — when your series order doesn't match the default --pds-chart-N sequence, or when the legend documents a semantic rather than positional encoding.
When to use it
Use ChartLegend to name the series in any multi-series LineChart, AreaChart, or BarChart — essential because the monochrome ramp means readers cannot rely on hue alone to tell series apart. Place it in the container's legend slot for consistent alignment.
It is not the hover readout — that's ChartTooltip, which shows per-point values. The legend is the persistent series key. For a single-series chart, skip it and let the ChartContainer label carry the metric name.
Usage
Do
- List items in the same order as the chart's `series` so swatch colors line up.
- Keep labels short — they render mono-UPPERCASE and truncation is ugly.
- Set `color` explicitly when the encoding is semantic (healthy/degraded), not positional.
- Place it in a ChartContainer `legend` slot for consistent spacing.
Don't
- Don't use it as a value readout — that's ChartTooltip's role.
- Don't add a legend to a single-series chart; the container label suffices.
- Don't invent swatch colors outside the `--pds-chart-*` ramp.
- Don't reorder items independently of the series — the swatches will lie.
Accessibility
- Swatches are marked `aria-hidden`; the text label is the accessible content, so labels must be self-sufficient (color is a secondary cue, never the only one).
- The legend pairs with a monochrome ramp so series remain distinguishable in grayscale and for color-vision deficiencies.
- It is a static row with no interactive behavior; it does not toggle series visibility.
ChartLegend props
| Prop | Type | Default | Description |
|---|---|---|---|
items * | ChartLegendItem[] | — | Legend entries, in series order. `ChartLegendItem` = `{ label: ReactNode; color?: string }` — color defaults to `--pds-chart-N` by position. |
...rest | React.HTMLAttributes<HTMLDivElement> | — | Spread onto the root `<div>` (e.g. `className`, `style`, `id`). |