Annotations

Reference lines, dots, areas, labels and extra axes mark goals, events and regions on a chart, and help a reader locate a value.

LLMs

Reference line

ReferenceLine with x draws a vertical marker, with y a horizontal goal, and with segment a line between two data points.

Reference line position

Set position on a ReferenceLine to place it at the start, middle or end of a category band on a bar chart.

Reference dot

A ReferenceDot marks one point in data coordinates, here the mean height and weight of a scatter of students.

Reference area

ReferenceArea shades the rectangle between x1, x2, y1 and y2, here a band where two scatter series overlap.

Label positions

Every position a Label takes on a cartesian chart, inside and outside the plot area outlined with usePlotArea.

Multiple X axes

Four XAxis elements with their own xAxisId, two of them mirrored, and a tooltip that snaps to one through axisId.

Automatic axis height

Long rotated ticks are cut off at the default XAxis height, while height="auto" measures them and grows the axis to fit.

Pointer crosshair

getRelativeCoordinate turns a mouse or touch event into chart pixels, drawn as a dashed Cross with its coordinates.

Snap to data

useXAxisInverseDataSnapScale and its Y twin turn the pointer position into the nearest data values, shown as two reference lines.

Shadow DOM

A PieChart rendered into a shadow root through a portal, with every color passed on the marks since page styles stop at the root.

Layering with zIndex

A metro map drawn with three Line series, where zIndex on each ReferenceDot puts interchanges behind the stations and airport links on top.