DonutChart

data is one object per slice, all values non-negative. The hole in the middle is what a donut adds over a pie: room for the total the slices add up to.

categoryKey sets which field on each row labels the slice.

valueKey sets which field holds its numeric size.

ariaLabel is required, and worth writing carefully — slice angles are the hardest thing on any chart to read back, so a screen reader gets nothing at all without it.

ariaDescription is the detail the label shouldn't carry.

label names what the center number counts. Without it the number sits there unexplained.

value overrides the center number, which otherwise sums every slice. Use it when the headline isn't the total — a leading share, a budget remaining.

innerRadius is the size of the hole, as a fraction of the radius — and the whole difference between a donut and a PieChart. Shrink it toward zero and you get a pie with a caption in it.

radius rounds the corners of each slice. A little softens the ring; too much starts eating into thin slices, which is how a small share disappears.

gap is the space between slices, in degrees. Zero gives an unbroken ring; a degree or two is enough to separate neighbouring slices that share a similar colour.

sort orders the slices largest-first by default, which is what makes a donut readable at a glance. Turn it off when the rows already have a meaningful order — a rating scale, a funnel.

colors pins a paint per slice, matched positionally to data before any sorting — so the colours follow your rows rather than the rendered order.

valueFormat covers the tooltip, the legend, and the default center total together.

tooltip shows the tooltip on hover.

animate is on by default: the slices sweep open on the first draw and slide to their new angles. Roll new values to compare it with the chart on the right, which has it off. Only the marks move — axes, tooltips and labels always read the real numbers — and a reader who has asked their system for reduced motion gets no motion either way.

legend shows the legend.

legendPosition sets where the legend sits relative to the plot.

legendAlign places the key horizontally. Centre reads well under a ring, which is itself centred, where start would leave it visibly off-axis.

legendOrientation flows the entries in a row or a column. vertical reads well beside the ring — one slice per line, in the same order as the arcs.

legendValues prints each slice's number in the legend, muted, beside its label — value, share (a whole percent, in the active locale) or both. The chart owns the numbers, so the label stays bare: with valueFormat set you no longer get the value written into it as well. Leave it off and the legend is exactly what it was.

legendGroup names a group that a standalone UiChartLegend with the same group belongs to, so the legend can sit anywhere — here above the plot — and still dim the other slices while you hover an entry. The chart hands the legend its entries, colors included, so it needs no items. Switch the chart's own legend off if you don't want two.

height is the plot's height in pixels; the ring is sized to fit inside it. It's ignored once aspectRatio is set.

aspectRatio sizes the chart from its container's width instead of a fixed height.

loading is a skeleton at the chart's exact height; an empty data array gets the empty state instead.

The chart's own legend sits under the plot. To put it beside the ring, switch that one off and place a UiChartLegend in the same group — it lists whatever the chart draws, legendValues texts included, so there's nothing to restate and the values line up as a column. Put it after the chart in the markup: a group-fed legend can only fill in once the chart has run.

#legend-item replaces what's inside each legend row, with the same scope UiChartLegend's #item gets: item (its text is the legendValues string), index, hovered and swatchClass. The row's hover handling stays outside it, so a custom row still dims the other slices.