Chart Reference Label

A recharts label for a reference line or dot — words on a baseline, a goal flag, or a value pill beside a point. Pass it as an element and recharts injects the viewBox.

tsx

1import { ChartReferenceLabel } from "@pestoui/core"

Text

The words written on a reference line, just above its left end, at the smallest step of the type scale.

Flag

A dark flag with a notch at the left end of a target line and a dot at each end of the dashed run. The flag paints over the start of the line, so the dashes leave from its point.

Pill

A card-coloured pill to the left of a reference dot: a muted label, then the value in bold. It is decorative and hidden from assistive tech — the chart's own summary carries the figure.

Props

Prop	Type	Default	Description
variant	"text" \| "flag" \| "pill"	"text"	Words on the line, a goal flag at its left end, or a value pill beside a dot.
text	ReactNode	—	The words, for text and flag.
label	ReactNode	—	The pill's muted leading run.
value	ReactNode	—	The pill's bold trailing run, 8px after the label.
width	number	84 (flag), 116 (pill)	The flag's or pill's width in px. Size it to the longest text it will carry.
fontSize	number \| string	the type scale	A raw SVG size for a chart whose labels sit off the scale. Leave it out: text takes 11px, flag and pill 12px.
viewBox	{ x, y, width, height }	—	Injected by recharts when the label is passed as an element. Leave it out.

PreviousChart Axis Tick Next Checkbox

Pesto UI · 117 documented components