Skip to main content

Labels

Chart Parts

Series and value labels on a chart: end labels, key labels and the collision layout that keeps every label readable or restates it for assistive technology.

Examples

6 live examples

Key Row When Narrow

The same chart in a 380 px column: the names sit in a key row above the plot.

Default And Opt Out

No label props at all: with two or more named series, each series names itself at the line end by default. The second chart opts out with `seriesLabel="none"`.

${name} College

One series, no label props: the chart title already names it, so the default paints no end label. `seriesLabel="end"` on the Line would paint one.

Labelled Scatter

Thirty labelled schools. `mode: "auto"` keeps one label per 6000 px² of plot, largest borrower count first, so a narrow chart paints fewer names; every dropped name is restated `sr-only`.

Bar Values Auto And Hover

`labels={{ placement: "auto" }}`: inside a bar long enough to hold the label, outside a short one. The second chart prints only the hovered bar.