Donut Widget
Parts of a whole, drawn as one SVG with no charting dependency. It has no axis and no scale, which is what keeps it a Widget rather than a Chart.
Usage
100%
of budget
<Donut label="Spend by category" slices={[{ value: 42, label: 'Infrastructure' }, { value: 28, label: 'Salaries' }]}/>What the maths refuses to do
- Negative values are dropped, not drawn backwards. A negative slice has no meaning in a whole.
- A set that sums to zero draws nothing rather than dividing by it.
- Arcs are laid end to end from the offset of the previous one, so there is no gap or overlap from rounding.
Do
Keep it to five slices or fewer; past that the arcs are too thin to tell apart.
Don't
Use a Donut for values over time — that is a Sparkline, and a circle implies a whole.
Props
| Prop | Type | Default | Notes |
|---|---|---|---|
| slices | Array<{ value, label }> | — | Order is drawing order and colour order. |
| size / thickness | number | 120 / 16 | Outer diameter and stroke, in px. |
| hues | DecorHue[] | — | Colour per slice, cycled. Defaults to the decorative palette. |
| label | string | — | Required — the accessible name of the whole widget. |
| children | ReactNode | — | Content in the hole, usually a total. |