Series Legend
A toggleable legend for chart series, with dot or dashed-line markers.
Usage
import {
SeriesLegend,
type SeriesLegendItem,
} from '@epilot/spark-ui/series-legend'function Legend() {
const [hiddenIds, setHiddenIds] = useState(() => new Set<string>())
return (
<SeriesLegend
items={items}
hiddenIds={hiddenIds}
onToggle={(id) => {
setHiddenIds((prev) => {
const next = new Set(prev)
if (next.has(id)) next.delete(id)
else next.add(id)
return next
})
}}
/>
)
}You own the hidden-id set and filter the chart series yourself. Composed charts such as Power History Chart and Bar Chart already wire this up; use the primitive when building a custom plot with Line Chart.
API Reference
SeriesLegendProps
| Prop | Type | Default | Description |
|---|---|---|---|
items | SeriesLegendItem[] | — | Series shown in order. |
hiddenIds | ReadonlySet<string> | — | Ids currently hidden. Those buttons render pressed-off and muted. |
onToggle | (id: string) => void | — | Fired when a legend button is clicked. Flip membership in your set. |
ariaLabel | string | "Filter data series" | Accessible name for the legend role="group". |
className | string | — | Merges onto the group. |
SeriesLegendItem
| Field | Type | Default | Description |
|---|---|---|---|
id | string | — | Stable id passed to onToggle and looked up in hiddenIds. |
label | string | — | Visible label; also used in the button aria-label. |
color | string | — | CSS color for the swatch. |
marker | "dot" | "dashed-line" | "dot" | dot for areas/bars; dashed-line for line overlays. |
Accessibility
- The legend is a
role="group"of toggle buttons. - Each button exposes
aria-pressed(truewhen shown) and anaria-labelof"{label}, shown"/"{label}, hidden". - Hidden items use reduced opacity and a strikethrough label; do not remove them from the DOM so keyboard order stays stable.