Pie chart
Part-to-whole at a glance. The legend prints every slice’s value and share.
When to use it
Six slices or fewer; anything past maxSlices folds into "Other". For close values, or a story about one number, use a bar or a stat tile.
Leads by source
Options
Everything you can pass to Pie chart.
| Prop | Type | Default | What it does |
|---|---|---|---|
| data | { name, value, color? }[] | — | Slices in the order to draw them. |
| maxSlices | number | 6 | The tail folds into a grey "Other". |
| labels | boolean | false | Percentages on the slices. |
| legend | boolean | true | Without it the figures go to a hidden table. |
| 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. |