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.

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.

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.