Same numbers twice: a pie fills the center, a donut has a holeA pie fills the center, a donut has a hole
Pie Chart vs. Donut Chart
/ SectorMark · type: 'doughnut' /
also called doughnut chart, ring chart, circle graph, sector chart
“A circle split into slices” is a pie chart; cut a hole in the middle and it becomes a donut chart (Swift Charts SectorMark with innerRadius, Chart.js type 'doughnut'). Both show how parts make up one whole, like traffic sources or disk space, and the hole of a donut usually holds the total or the value of the slice under the pointer. Thin gaps between slices keep neighbors apart. Not a gauge (a half ring with a needle showing one reading) or a progress ring (one value filling a circle); past five or six slices, a bar chart compares sizes better.
If you called it…
…you meant Pie Chart vs. Donut Chart.
Anatomy — every part, named
- 1Slice (sector)
SectorMark“One colored piece of the circle” is a slice, also called a sector or wedge.
- 2Center label
“The number inside the hole” is the center label: the total, or the slice under the pointer.
- 3Slice gap (padding angle)
paddingAngle“The thin white lines between the slices” are slice gaps, set with Recharts paddingAngle or Swift Charts angularInset.
- 4Legend
“The colored dots with names next to the chart” are the legend, the key that says which color is which.
Prompt — paste into your agent
Build a donut chart (Swift Charts SectorMark with innerRadius; Recharts <Pie innerRadius paddingAngle>) for parts of one whole: four or five slices, a thin even gap between slices, the total inside the hole, and a legend in the same colors and order. Hovering a slice or its legend row pops that slice out and shows its value in the center. No 3D, and no more than six slices.
Debug prompt — when it misbehaves
Paste this, then describe what you’re seeing — it hands your agent the classic failure modes to rule out first.
Debug my pie or donut chart (Swift Charts SectorMark / Recharts Pie / Chart.js doughnut). Rule out: the first slice starting at 3 o'clock instead of 12 because of the start angle; the hole missing because innerRadius or cutout is 0; legend colors not matching the slices because the color list is in a different order; the center label off center because it is positioned against the card, not the chart; slices that don't add up to the whole because the values were not normalized; tiny slices whose labels overlap. The symptom:
In code
The exact names this thing goes by in code — each row is one framework’s word for it. Use the row that matches your project (or paste it into your prompt).
| Swift Charts | SectorMark | macOS 14+ and iOS 17+; innerRadius makes the hole, angularInset the gaps |
| Chart.js | type: 'doughnut' | cutout sets the hole; type: 'pie' has none |
| Recharts | <Pie innerRadius paddingAngle> | innerRadius 0 is a pie |
| Material UI | <PieChart> | MUI X Charts; innerRadius makes it a donut |
| CSS | conic-gradient() | a pure CSS pie; screen readers can't read it |