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.

onToggle?(info: LegendToggleInfo) => void

Fired after a click changes series visibility — via the built-in UI or a custom children render-prop calling item.toggle()/isolate() directly. Live — the latest callback is always used.

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>