> ## Documentation Index
> Fetch the complete documentation index at: https://mintlify.com/recharts/recharts/llms.txt
> Use this file to discover all available pages before exploring further.

# 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

```tsx theme={null}
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

<ParamField path="dataKey" type="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.
</ParamField>

<ParamField path="valueAccessor" type="function">
  Function to get the value of each label.

  Ignored if `dataKey` is specified.

  Signature: `(entry: CartesianLabelListEntry | PolarLabelListEntry, index: number) => RenderableText`
</ParamField>

### Content

<ParamField path="content" type="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
</ParamField>

### Position

<ParamField path="position" type="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`
</ParamField>

<ParamField path="offset" type="number">
  The offset to the specified position.

  Direction of the offset depends on the position.
</ParamField>

### Formatting

<ParamField path="formatter" type="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`
</ParamField>

### Appearance

<ParamField path="angle" type="number" default="0">
  Text rotation angle in degrees.

  Positive values rotate clockwise, negative values rotate counterclockwise.
</ParamField>

<ParamField path="textBreakAll" type="boolean">
  If true, enables character-level breaking instead of word-level breaking.
</ParamField>

<ParamField path="fill" type="string">
  The fill color of the label text.

  If not specified, inherits from the data entry.
</ParamField>

<ParamField path="stroke" type="string">
  The stroke color of the label text.
</ParamField>

<ParamField path="fontSize" type="number">
  The font size of the label text.
</ParamField>

<ParamField path="fontFamily" type="string">
  The font family of the label text.
</ParamField>

<ParamField path="fontWeight" type="string | number">
  The font weight of the label text.
</ParamField>

### Polar charts

<ParamField path="clockWise" type="boolean">
  The parameter to calculate the view box of labels in radial charts.
</ParamField>

### Display

<ParamField path="zIndex" type="number" default="2000">
  The z-index of the label list.

  Higher values render on top of lower values.
</ParamField>

### Other

<ParamField path="id" type="string">
  Unique identifier of this component.

  Used as a prefix for each label's HTML attribute `id`.
</ParamField>

<ParamField path="className" type="string">
  CSS class name for the label list container.
</ParamField>

## 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:

```tsx theme={null}
// Explicit
<Bar dataKey="uv">
  <LabelList position="top" />
</Bar>

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