Labels and Cells

Kind exports Recharts' LabelList, Label and Cell directly. Use them within the chart or series supported by Recharts.

LabelListCopy Anchor Link

Nest LabelList inside a series to label its marks. dataKey selects the label value; position, offset and content control placement and rendering.

<Chart.LineSeries dataKey="orders">
  <Chart.LabelList dataKey="orders" position="top" offset={8} />
</Chart.LineSeries>

In radial bars, use content={<Chart.RadialBarLabel />} for measured arc text. Recalculate percentage labels after filtering if they describe the visible total.

See Recharts LabelList.

LabelCopy Anchor Link

Use Label for axis titles or custom center content. Its content callback lets you draw SVG text using the supplied geometry. Check that custom text fits at narrow widths.

See Recharts Label.

CellCopy Anchor Link

Nest Cell inside a supported series to override paint per item. Keep Cells in the same order as the rows passed to that series, including after filtering.

<Chart.PieSeries data={data} dataKey="value" nameKey="category">
  {data.map((row) => <Chart.Cell key={row.category} fill={row.color} />)}
</Chart.PieSeries>

Custom paint can override a Kind material's finish; see the chart family's material guidance. See Recharts Cell for supported props.