Wick Charts

Legend

import { Legend } from '@wick-charts/react';
 
<Legend>
{({ items }) => (
<ul>{items.map(i => <li key={i.id}>{i.label}</li>)}</ul>
)}
</Legend>

Series legend with three interaction modes: toggle (click hides), solo (click isolates), isolate (click hides others). Use the render-prop child for fully custom rendering.

Series legend with three interaction modes: toggle (click hides), solo (click isolates), isolate (click hides others). Use the render-prop child for fully custom rendering.

Props

items?LegendItemOverride[]

Static override for auto-detected items. Renders a non-interactive legend with just swatch + label. Ignored when children is a render-prop.

position?default 'bottom''bottom' | 'right'

Layout position. Default: 'bottom'.

mode?default 'toggle'LegendMode

Click behavior for the built-in UI. Default: 'toggle'. Ignored when children is provided.

children?(ctx: LegendRenderContext) => ReactNode

Render-prop escape hatch. Receives the computed items (each carrying its own toggle() / isolate() closures) and fully replaces the built-in flex row / column. Callers can filter, reorder, and re-style without reimplementing visibility wiring.

Render prop

// children: (ctx: LegendRenderContext) => ReactNode
<Legend>
{({ items }) => (
<ul>{items.map(i => <li key={i.id}>{i.label}</li>)}</ul>
)}
</Legend>