Wick Charts

PieLegend

import { PieLegend } from '@wick-charts/react';
 
<PieLegend seriesId='pie'>
  {({ slices, mode, format }) => (
    <ul>{slices.map(s => <li key={s.label}>{s.label}: {format(s.value)}</li>)}</ul>
  )}
</PieLegend>

Companion to <PieSeries> — renders slice labels with their value or percent, anchored to one of three positions (bottom, right, overlay).

Companion to <PieSeries> — renders slice labels with their value or percent, anchored to one of three positions (bottom, right, overlay).

Props

seriesId?string

Owning series id. Optional — when omitted, the first visible pie series is picked.

mode?default 'both'PieLegendMode

Default: 'both'. See PieLegendMode.

format?default shared `formatCompact`ValueFormatter

Custom formatter for the absolute slice value. Default: shared formatCompact.

position?default 'bottom'PieLegendPosition

Layout placement. Default: 'bottom'. See PieLegendPosition.

children?(ctx: PieLegendRenderContext) => ReactNode

Render-prop escape hatch. Receives slices + mode + format, replaces default UI.

Render prop

// children: (ctx: PieLegendRenderContext) => ReactNode
<PieLegend>
  {({ slices, mode, format }) => (
    <ul>{slices.map(s => <li key={s.label}>{s.label}: {format(s.value)}</li>)}</ul>
  )}
</PieLegend>