Legend
Display series labels and let readers toggle their visibility.
Legend reads labels and markers from Root. Place it outside the plot's ResponsiveContainer.
Usage
<Chart.Root config={config} visibleSeries={visibleSeries} onVisibleSeriesChange={setVisibleSeries}>
<Chart.Legend />
{/* ResponsiveContainer and plot */}
</Chart.Root>With controlled visibility and a change callback, items are buttons with aria-pressed and Enter/Space support. Otherwise they display labels.
Markers and content
Configured icons take priority over legendShape; otherwise items use color swatches. hideIcon forces swatches. For Scatter, set the same symbol on legendShape and ScatterSeries.shape.
Use the render callback for custom item content. Kind keeps the surrounding button and visibility state, so return noninteractive content.
<Chart.Legend>
{({ label, marker, visible }) => (
<span>{marker}{label}{visible ? "" : " (hidden)"}</span>
)}
</Chart.Legend>Props
| Prop | Type | Required |
|---|---|---|
className | string | undefined | No |
hideIcon | boolean | undefinedUse the existing square color swatch instead of configured icons or symbols. | No |
emphasis | "none" | "series" | undefinedExplicit series emphasis; visibility click behavior remains controlled by Root. | No |
children | ((item: { key: string; label: string; visible: boolean; marker: React.ReactNode; }) => React.ReactNode) | undefinedCompose each item's noninteractive content; Kind retains list/button/state ownership. | No |
hideIcon defaults to false; emphasis defaults to "none". Use emphasis="series" to request highlighting on hover or focus in supported chart families. Scatter does not automatically dim marks.
Legend accepts native ul props and a ref. This is Kind's legend; Recharts Legend has a separate API.