PieChart

data is one object per slice, and every value must be non-negative — a pie shows parts of one whole, and a negative part of a whole has no angle to draw.

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 the sentence should carry the finding rather than just naming the fields.

ariaDescription is the detail the label shouldn't carry.

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

gap is the space between slices, in degrees. Widen it to separate slices of similar colour; drop it to zero for an unbroken wheel.

sort orders the slices largest-first by default, which is what makes them comparable by eye. Turn it off when the rows already have a meaningful order — severity, plan tier, a funnel.

colors pins a paint per slice, matched positionally to data — so it lines up with the rows as given, before any sorting.

valueFormat formats the values in the tooltip and the legend.

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 is on by default, and worth keeping: without it the slices carry their identity in colour alone, which only works when the surrounding copy names them.

legendPosition sets where the legend sits relative to the plot.

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

legendOrientation flows the entries in a row or a column. vertical is the natural fit for a pie — one slice per line, beside or beneath the circle.

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. To keep the values in a column, make the legend vertical.

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 wheel 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.

A pie stops being readable past five or six slices — the small ones become slivers no one can compare. Group the tail before it reaches the chart rather than shrinking the slices further.

#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.