ChartLegend

Series legend. Each item is a toggle button (aria-pressed), so hiding a series works with mouse, touch and keyboard; hovering or focusing one dims the rest of the chart.

Import

import { ChartLegend } from "@jcsoftdev/ui/charts";

Single-component entry points tree-shake to just this component: @jcsoftdev/ui/charts/core.

Usage

<ChartLegend items={items} align="start" />

Props

Prop	Type	Default	Description
items *	readonly LegendItem[]
onToggle	((id: string) => void)		Click toggles a series. Omit for a read-only legend.
onHighlight	((id: string | null) => void)		Hover or focus of an item, null when leaving: used to dim the other series.
align	"center" | "start" | "end"	"start"
className	string

* marks a required prop.

Storybook stories

• Read Only
• Toggleable
• Centered

Source

packages/ui/src/charts/core/legend.tsx