Charts · Composition
Parts of a whole
Composition charts are the easiest to misuse. A donut only works when the parts genuinely form a whole and there are few of them; a treemap or sunburst carries hierarchy; a funnel shows staged attrition.
Donut
Six slices, a centred total, and a chart that still reads at 320px wide.
Cost composition
Donut — the default variant.
Pie
Available, but rarely the right call.
Hierarchy
Treemap for area comparison inside a hierarchy; sunburst for depth.
Treemap
Two levels: region, then product line.
Sunburst
Three levels, radial labels, no click-to-drill by default.
Funnel
Staged attrition; each stage is labelled with its own share of the first.
Acquisition funnel
Chart selection rules
Donut, when
There is a genuine whole, six or fewer parts, and the reader only needs rank or rough share.
Bar chart, when
The categories do not sum to anything meaningful, or there are more than six of them.
Never
3D pies, exploded slices, or a donut used purely because the dashboard felt flat.
<PieChart data={parts} variant="donut" centerValue="1,152" centerLabel="Total" />
// Beyond six slices the component says so in its own description.
<PieChart data={tooManyParts} />