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

PropTypeDefaultDescription
itemsSeriesLegendItem[]Series shown in order.
hiddenIdsReadonlySet<string>Ids currently hidden. Those buttons render pressed-off and muted.
onToggle(id: string) => voidFired when a legend button is clicked. Flip membership in your set.
ariaLabelstring"Filter data series"Accessible name for the legend role="group".
classNamestringMerges onto the group.

SeriesLegendItem

FieldTypeDefaultDescription
idstringStable id passed to onToggle and looked up in hiddenIds.
labelstringVisible label; also used in the button aria-label.
colorstringCSS 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 (true when shown) and an aria-label of "{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.

On this page