Donut chart
A pie with the total in the hole.
When to use it
Same rules as the pie. The centre figure is HTML, so it takes the page font and follows the theme.
Active projects by stage
Options
Everything you can pass to Donut chart.
| Prop | Type | Default | What it does |
|---|---|---|---|
| total | ReactNode | sum of slices | Centre figure. |
| totalLabel | string | 'Total' | Caption under it. |
| data / maxSlices / labels / legend | — | — | As PieChart. |
| height | number | string | — | Plot height. The HTML legend sits outside it. |
| valueFormatter | (value) => string | en-IN, 2 dp | Axis labels, tooltips, value labels and the hidden data table. |
| aria-label | string | — | What the chart shows. Also captions its hidden data table. |
| loading / emptyTitle / emptyDescription | boolean / string | — | Passed to Chart: skeleton, and the empty state when every value is zero. |