LabelList

Renders a list of labels for data points

Renders a list of labels for data points in a chart. The LabelList component displays one label for each data point in a graphical element like Bar, Line, or Area.

Usage

import { BarChart, Bar, LabelList } from 'recharts';

<BarChart width={500} height={300} data={data}>
  <Bar dataKey="uv">
    <LabelList dataKey="uv" position="top" />
  </Bar>
</BarChart>

Props

Data

dataKey · DataKey<any>

Decides how to extract the value of each label from the data.

Can be a string, number, function, or array path.

If set, valueAccessor is ignored. Scatter charts require this prop.

valueAccessor · function

Function to get the value of each label.

Ignored if dataKey is specified.

Signature: (entry: CartesianLabelListEntry | PolarLabelListEntry, index: number) => RenderableText

Content

content · ReactElement | function

Custom content for each label.

Options:

• ReactElement: Custom label element, cloned for each data point
• function: Called once for each item to render custom label

Position

position · LabelPosition

The position of labels relative to the view box.

Cartesian positions:

• top, bottom, left, right
• insideLeft, insideRight, insideTop, insideBottom
• insideTopLeft, insideTopRight, insideBottomLeft, insideBottomRight
• center, centerTop, centerBottom

Polar positions:

• insideStart, insideEnd, end
• outside, center

offset · number

The offset to the specified position.

Direction of the offset depends on the position.

Formatting

formatter · function

Function to customize how content is serialized before rendering.

Should return renderable text (string or number). Custom components are not supported here - use the content prop instead.

Signature: (label: RenderableText) => RenderableText

Appearance

angle · number · default: "0"

Text rotation angle in degrees.

Positive values rotate clockwise, negative values rotate counterclockwise.

textBreakAll · boolean

If true, enables character-level breaking instead of word-level breaking.

fill · string

The fill color of the label text.

If not specified, inherits from the data entry.

stroke · string

The stroke color of the label text.

fontSize · number

The font size of the label text.

fontFamily · string

The font family of the label text.

fontWeight · string | number

The font weight of the label text.

Polar charts

clockWise · boolean

The parameter to calculate the view box of labels in radial charts.

Display

zIndex · number · default: "2000"

The z-index of the label list.

Higher values render on top of lower values.

Other

id · string

Unique identifier of this component.

Used as a prefix for each label’s HTML attribute id.

className · string

CSS class name for the label list container.

Context

The LabelList component consumes LabelListContext, which is typically provided by graphical elements like Bar, Line, Area, etc.

When rendered as a child of a graphical element, the data and viewBox are automatically provided.

Implicit usage

LabelList can be used implicitly via the label prop on graphical elements:

// Explicit
<Bar dataKey="uv">
  <LabelList position="top" />
</Bar>

// Implicit (equivalent)
<Bar dataKey="uv" label={{ position: 'top' }} />