DonutChart
Part-to-whole as a ring, with an optional summed total in the centre. See Charts overview for the loading, empty, events and ref props shared by every chart.
Basic
- Free
- Team
- Enterprise
<DonutChart theme={resolvedTheme} ariaLabel="Plan distribution" data={[ { name: 'Free', value: 480 }, { name: 'Team', value: 260 }, { name: 'Enterprise', value: 90 }, ]}/>With total
showTotal draws the summed value in the centre of the ring, with an optional totalLabel caption.
- Free
- Team
- Enterprise
<DonutChart showTotal totalLabel="Accounts" ariaLabel="Plan distribution" data={[ { name: 'Free', value: 480 }, { name: 'Team', value: 260 }, { name: 'Enterprise', value: 90 }, ]}/>Selectable
With selectable, clicking a slice (or its legend entry) selects it — the chosen slice stays vivid while the rest dim, and onSelect fires. Clicking it again clears the selection. Selection can be controlled with selected or left uncontrolled with defaultSelected.
Click a slice to select it.
const [selected, setSelected] = useState<string | null>(null);
<DonutChart selectable selected={selected} onSelect={setSelected} ariaLabel="Plan distribution — click a slice to select it" data={data}/>Props
| Prop | Type | Default | Notes |
|---|---|---|---|
data | { name, value }[] | — | Named slices. |
showTotal / totalLabel | boolean / string | — | Draw the summed total in the centre, with a caption. |
valueFormatter | (value: number) => string | — | Format the centre total and tooltip values. |
colors | string[] | — | Override the theme palette; one colour per slice. |
showLegend | boolean | true | Toggle the legend. |
selectable | boolean | false | Let a slice be selected by clicking it or its legend entry. |
selected / defaultSelected | string | null | — | Controlled / initial selected slice name. |
onSelect | (name: string | null) => void | — | Fires with the selected slice name, or null when cleared. |