Arc

Pie, donut and gauge

arc draws a ring of slices, each one's angle proportional to its value. The three familiar shapes are one mark at different settings: innerRadius opens the hole in the middle, and startAngle / endAngle narrow the ring to part of a turn.

A radial mark takes the whole plot. The chart draws no axes or grid around one, and it isn't layered with bar, line or area.

value is the quantity, and series names each slice — it colors it from the palette and gives the legend something to label. Angles are degrees clockwise from twelve o'clock.

Drop innerRadius for a pie. A donut is usually the better of the two: the arc lengths carry the comparison just as well as filled wedges do, and the hole leaves room to write the total.

Either way, keep the slice count low. Past five or six the angles stop being comparable, and a bar chart answers the same question better — group the tail into an "Other" row rather than drawing it.

Slices are drawn in row order, so sort the rows before handing them over if the ring should read largest-first.

A donut's slices carry a small corner radius by default; a pie's are left sharp. cornerRadius sets it either way, and sliceGap opens a gap between neighbors. A slice too thin for the radius or gap it asked for takes the room it has, so a long tail thins out instead of breaking.

Sizing the ring

A radial mark takes the whole plot, so height sets the surface and the ring together. outerRadius separates them — a fraction of the room the plot has, where 1 fills it:

arc({ data: rows, value: 'delivered', series: 'channel', innerRadius: 0.6, outerRadius: 0.6 });

Reach for it when something other than the ring is setting the height — a tall legend beside a small donut, say.

innerRadius is a fraction of the ring outerRadius leaves rather than of the plot, so the two compose.

Gauges

A gauge is the same mark over part of a turn. Two options make it one:

• total — the whole the values are shares of, when it isn't their sum. Without it a lone value fills the ring whatever its size; with it, 68 against a total of 100 fills a little over two-thirds and leaves the rest empty.
• withTrack — paints a neutral ring behind the slices across the whole angular range, so the empty part reads as unfilled rather than as missing.

An arc length is a compact status summary, not a way to compare precise figures — put the exact number where the reader can read it rather than leaving them to judge the sweep.

The track's color is a CSS variable, PlumaChart.vars.arcTrackColor, so a gauge can take a different neutral without touching the mark.

Reading a slice

Hovering or arrow-keying a radial chart focuses the single slice under the pointer — and only when the pointer is actually over one. A slice is a shape rather than a catchment area, so the hole in a donut and the space around the ring belong to nothing, however close the nearest slice happens to be — there is nothing else at that angle to compare it against — and the tooltip names it and reads out its value. withHoverColor and withUnfocusedDim work as they do on any other mark: the focused slice repaints in its hover twin while the rest recede.

There are no axes on a radial chart, but yAxis still describes the quantity: its format writes the value in the tooltip, and its label names it when the mark has no series to name it instead. withLegend gives the slices an interactive legend, and taking one off reallocates the ring across what's left.

For a tooltip carrying a figure the chart can't derive — each slice's share of the whole, say — use renderTooltipContent; the points it receives carry your original rows.