A chart is a list of marks. Each one comes from a factory function — line, bar, area, arc, sankey, dot, autoPositionedLabel — that takes the rows it draws and the names of the fields to read them by. They are plain objects rather than components, which is why both frameworks take the same array, and why a chart can be assembled conditionally, memoized, or built in a getter.

A mark can also annotate the chart rather than being a reading of its own: decorative wraps one so it still draws and still contributes to the scales, but owns no chart points — which keeps it out of the tooltip. See Dot.

Marks that share a pair of axes also share their scales, so two marks in one chart can't disagree about where a value sits. arc and sankey are the exceptions: each brings its own geometry and takes the whole plot, so a chart drawing one has no axes or grid around it and nothing to layer against.

Layering marks

Marks paint in order, and every mark reads the same pair of scales — so a bar and a line in one chart can't disagree about where a value sits. Here a line traces the total across the bars beneath it:

Loading editor

In this section

Line and area — The two continuous marks — a line traced through the rows, and the fill beneath it — plus the curve and the labels that go with them.

Bar — A bar per row, or a bar group per series — upright by default, and on its side where the category names or the ranking ask for it.

Sparkline — A chart with everything but the shape taken away, small enough to sit in a table cell beside the number it qualifies.

Dot — A dot per row, for points a reader is meant to notice — and `decorative`, which keeps an annotation out of the tooltip.

Arc — A ring of slices, each one's angle proportional to its value — the pie, the donut and the gauge are one mark at different settings.

Sankey — Ribbons through a set of stages, showing how a quantity splits, drops off and recombines on its way.

Marks

Layering marks

In this section

On this page