Label

Renders a single label in a chart

Renders a single label in a chart. The Label component displays text at a specific position, often used to annotate axes, data points, or chart areas.

Usage

import { LineChart, Line, XAxis, Label } from 'recharts';

<LineChart width={500} height={300} data={data}>
  <XAxis dataKey="name">
    <Label value="Date" position="insideBottom" />
  </XAxis>
  <Line dataKey="uv" />
</LineChart>

Props

Content

value · string | number

The value of the label.

Can also be set as children: <Label>foo</Label>

children · string | number

Alternative way to set the label value.

Can also be set via the value prop: <Label value="foo" />

content · ReactElement | function

Custom content for the label.

Options:

• ReactElement: Custom label element
• function: Render function that receives label props and returns a React element

Position

position · LabelPosition · default: "middle"

The position of the label relative to the view box.

Cartesian positions:

• top, bottom, left, right
• topLeft, topRight, bottomLeft, bottomRight
• insideLeft, insideRight, insideTop, insideBottom
• insideTopLeft, insideTopRight, insideBottomLeft, insideBottomRight
• center, centerTop, centerBottom
• middle

Polar positions:

• insideStart, insideEnd, end
• outside, center, centerTop, centerBottom

offset · number · default: "5"

The offset to the specified position.

Direction of the offset depends on the position.

View box

viewBox · ViewBox

The box of the viewing area, used for positioning.

If undefined, viewBox is calculated based on surrounding context.

parentViewBox · ViewBox

The parent view box, used for positioning calculations.

Text formatting

formatter · function

Function to customize how content is serialized before rendering.

Should return renderable text (string or number).

Signature: (label: RenderableText) => RenderableText

Appearance

angle · number · default: "0"

Text rotation angle in degrees.

Positive values rotate clockwise, negative values rotate counterclockwise.

textBreakAll · boolean · default: "false"

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

fill · string

The fill color of the label text.

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.

Display

zIndex · number · default: "2000"

The z-index of the label.

Higher values render on top of lower values.

Other

className · string

CSS class name for the label element.

id · string

Unique identifier of this component.

Used as an HTML attribute id.

index · number

The index of this label in a series of labels.

Context

The Label component consumes context from:

• CartesianViewBoxContext
• PolarViewBoxContext
• CartesianLabelContext
• PolarLabelContext

When rendered as a child of an axis or graphical element, the viewBox is automatically provided.