Install Figma Charts — it’s free to try → See the donut chart gallery →
A donut chart is a pie with a hole in it, and almost everything written about it treats that hole as a stylistic preference. It is not. The hole is the entire reason to choose one, because it is somewhere to put the total — and a chart that answers “how much altogether?” and “how does it divide?” in a single object is doing something a pie cannot.
Which also means: if you are not putting anything in the middle, you have drawn a pie with a bite taken out of it.
Everything below happens inside Figma Charts, a Figma plugin. It runs the real JavaScript charting libraries — Google Charts, Highcharts, D3-based Nivo, ApexCharts and Apache ECharts — inside the plugin window.
Install Figma Charts from the Figma Community →
Press ⌘/ (Ctrl / on Windows), type Figma Charts, hit Enter. Then read the next section before you go looking for the Donut chip, because it is only under one of the five tabs.
This trips people up, so it is worth clearing up first: all five libraries draw donut charts, but only ApexCharts gives Donut its own category chip.
So a missing Donut chip means “this library files it under Pie”, never “this library cannot draw one”. If your engineers have standardised on ECharts or Highcharts, you are not giving up donuts by designing there.
A donut answers “what is this total made of?” — with the emphasis on total.
Strictly, cutting out the centre weakens the encoding slightly. A pie asks you to judge angle from a shared vertex; a donut removes that vertex and leaves you judging arc length and segment area instead. In controlled studies the difference is small, and at the sizes charts are usually drawn it is not the thing that decides whether your chart works. What decides that is the same as for a pie: how many slices, and whether they are labelled.
What the hole genuinely buys is a protected region in the optical centre of the chart, where a number can sit without competing with anything. Put the total there — “1,284 tickets”, “£2.4m committed” — and the chart carries both magnitude and composition. A pie carries composition only, and needs a caption for the rest.
This is why donuts dominate dashboards and KPI tiles while pies dominate slide decks. It is not fashion; it is that a tile usually needs one headline figure and a breakdown, and a donut is the shape of that requirement.
There is a second, quieter advantage. Because the centre is protected space, a donut degrades gracefully as it shrinks: the ring thins, the labels drop away, and the number remains — still legible, still the most important thing on the tile. A pie shrunk to the same size loses its labels and leaves you with coloured wedges and no way to read them. If a chart has to work at several sizes, that difference matters more than the encoding argument.
Use a donut in the same cases a pie is justified — parts that genuinely sum to a meaningful whole, few enough to label — plus a total worth stating. And use it for a KPI tile where one figure leads and the breakdown supports it.
1. Not when you have nothing to put in the middle. An empty hole is wasted space and a marginally worse encoding. If there is no total, subtitle or icon that belongs there, draw a pie.
2. Not for the cases a pie already fails. The hole does not fix too many slices, close-together values, or parts that do not sum to a whole. Everything in when not to use a pie applies identically. If your chart has nine categories, a donut is a nine-slice pie with a hole.
3. Not stacked as concentric rings to compare groups. Nested donuts — one ring per year, say — look sophisticated and are close to unreadable: the outer rings have more circumference than the inner ones, so the same share is drawn at a different arc length depending which ring it sits in. Use a set of stacked bars.
Exactly a pie’s — the name-value shape:
The library computes the percentages from your raw values, and the total in the centre is usually the sum of that same column — which is worth checking rather than assuming. If your data is a “top five” and the real total includes a tail you did not chart, the number in the middle and the segments around it are describing different populations. Either chart the tail as “Other” so the ring really is the total, or label the centre honestly as “top five”.
Donuts accept a linked data source in all five libraries. As with pies, an unparseable cell becomes 0 and a zero-value segment vanishes silently — and on a donut this is more dangerous, because the centre total will still include whatever that cell contributed if you calculated it elsewhere.
That last step matters. Some libraries and examples draw a centre label for you; others do not, in which case the honest approach is to add a text layer in Figma after inserting as SVG — and to remember that it will not update when the data does. If the chart is going to be refreshed from a live source, note the total in a way somebody will maintain.
The hole size is the only genuinely donut-specific decision, and it trades two things off against each other.
A larger hole gives more room for the centre content and makes the ring thinner. A thin ring reads more like a progress indicator than a composition — which is right when you have two or three segments and a dominant headline number, and wrong when you have five segments whose relative sizes are the point.
A smaller hole keeps more of the pie’s area encoding and gives segments more visual mass, at the cost of centre space. Below about a third of the radius the hole stops reading as deliberate and starts looking like a rendering artefact.
A practical range is 50–65% of the outer radius for a composition chart with a total in the middle. Go thinner only when the ring has become supporting decoration for a single number — at which point consider whether a gauge or a plain figure would be more honest.
The semi-donut — a half ring, available in ApexCharts and Highcharts — is worth knowing for tiles. It puts the number under a compact arc and fits a wide, short space that a full circle wastes. Same encoding, better shape for a dashboard row.
Skip the 3D donut for the same reason as the 3D pie: perspective makes front segments larger than back ones, so equal shares are drawn at different sizes. It is decoration that changes what the numbers appear to say.
The centre is the headline, so treat it like one. Large, high-contrast, one figure — with a short label beneath it at a much smaller size. If you find yourself fitting three lines into the hole, the hole is too big or the content belongs outside.
Do not let the ring compete with the centre. If the number is the point, the segments can be quieter than you would make a standalone pie. Muted fills with a strong centre reads as one clear object; saturated fills plus a big number reads as two things fighting.
Label directly and include the share. As with pies, a legend forces a lookup between a key and a radial arrangement. Labels on or beside segments remove it.
Sort by size, clockwise from twelve. Same convention as a pie, for the same reason: the top and clockwise direction get read first, so the largest share takes the most legible position.
Mind the gap. Small padding between segments helps them read as distinct without the dishonesty of exploding them apart. Keep it to a couple of pixels — enough to separate, not enough to add meaningless area.
For colours and type bound to your design system rather than picked by hand, see Your chart, your design system.
The centre number can contradict the ring. This is the failure mode unique to donuts. If the segments are a filtered subset and the total is the unfiltered figure, the chart makes a claim it does not support — and because the number is authoritative-looking, readers trust it over the shapes. Make sure the middle is the sum of what is drawn, or say what it is.
Arc length judgement is still poor. A donut is not a fix for the pie’s core weakness. Printing percentages defuses most of it — and if the chart only works because of the printed numbers, it is a table wearing a costume.
A thin ring reads as progress, not composition. At very large inner radii, readers interpret the filled arc as “percent complete” against the empty remainder, especially with two segments. If that is not the message, thicken the ring.
Concentric rings are not comparable. Repeated for emphasis, because nested donuts look appealing in a gallery: the same percentage occupies a longer arc on an outer ring than an inner one, so identical shares are drawn at different lengths.
A two-segment donut is a percentage. “68% complete” needs a number, possibly a bar, and rarely a ring. Reach for the donut when the breakdown genuinely has parts worth seeing.
And rounding still has to add up. Three equal shares display as 33% each and total 99%, which readers notice on a chart whose whole premise is that the parts make a whole. Show a decimal place or note that the figures are rounded — and if the centre total was computed independently, check it against the sum of the displayed shares rather than trusting both to agree.
Most donuts in the wild are not standalone charts; they are components inside a dashboard tile. That context changes several of the decisions above, and it is worth designing for it explicitly rather than shrinking a full-size chart.
Strip the furniture. A tile has no room for a title, a legend, a tooltip or axis labels — the card supplies the title and the space is needed for the ring and the number. The plugin has a direct control for this: set the complexity control in the editor header to Essential and the chart drops its title, legend, tooltip, gridlines and data labels, leaving the marks alone. One control instead of a dozen.
Cut the segments hard. At tile size, five segments become five slivers. Three is a comfortable maximum, and two plus “Other” is often the honest reduction. The detail belongs on the page the tile links to.
Let the number lead. In a tile the ring is supporting evidence for the figure, not the other way round. Size the type so the number is legible at a glance across a room, and let the ring be quiet around it.
Check it at the size it will ship. This is the step people skip. A donut designed at 400px and placed at 140px loses its labels, its segment padding closes up, and its centre type either overflows or shrinks below readable. Set the chart’s width and height under Appearance to the real tile dimensions before you judge it — the plugin draws at those dimensions regardless of how large the preview happens to be showing it.
Donuts depend on colour as heavily as pies, with no position or length to fall back on. Adjacent segments that read as one colour merge into one apparent segment. Check neighbouring pairs against each other, not just against the background, and label directly wherever you can.
The centre number is a genuine accessibility asset — use it. It is the one part of the chart that communicates without colour, shape or angle judgement, and it will be read correctly by everyone.
Ship a text equivalent. Copy Data Table in the Export tab produces an HTML table of categories and values, which for a donut gives exact shares rather than arcs to estimate. Copy Alt Text and Set Node Desc attach the summary to the Figma node.
If you added the centre total as a Figma text layer, make sure it is real text rather than outlines, so it is selectable and readable by assistive technology. Inserting as SVG keeps text as text; inserting as PNG does not.
From the Export tab, Code writes a component for React, Vue 3, Angular, Svelte or vanilla JavaScript using the same library at the same major version; Config gives you the library’s own options object; Tokens exports colours and type.
For donuts, the inner radius, start angle, segment padding and label placement are exactly the values a developer would otherwise estimate from a screenshot — and getting the inner radius wrong by 10% changes the whole character of the tile. Hand over the config. From Figma to code covers all eight formats.
Flag the centre content explicitly in the handoff, since it is often a separate element rather than part of the chart config — whoever builds it needs to know whether it is computed from the series or supplied separately.
Slightly worse as an encoding — removing the centre replaces angle-from-a-vertex with arc length — and better as a component, because the hole holds a total. Choose a donut when you have a number for the middle; choose a pie when you do not.
Because only ApexCharts files Donut separately. All five draw them: Highcharts has donut, 3D donut and semi-circle donut; ECharts has doughnut and half-donut; Google has a donut example; Nivo sets an inner radius on a pie. Look under Pie.
About 50–65% of the outer radius for a composition chart with a total in the middle. Larger and the ring reads as a progress indicator; smaller and the hole stops looking deliberate.
The same as a pie — about five. The hole does not fix too many slices; it just moves them outward. Group the tail into “Other”, and if “Other” is the largest segment, use a sorted bar chart.
You can, and it is hard to read. The same share occupies a longer arc on an outer ring than an inner one, so identical values look different. Use stacked bars, one per group.
Almost always, and if it is not, say so. A centre total covering a wider population than the ring is the one failure mode unique to donuts, and readers trust the number over the shapes.
Fitting a composition and a headline number into a wide, short space — a dashboard row, a card header. Same encoding as a full donut, better aspect ratio for a tile. ApexCharts and Highcharts both ship one.
Yes, but not with Smart Animate — donut segments cannot morph between states, because their angles have no interpolable correspondence. The plugin recommends Dissolve; see the animation post.
Open a donut and ask what goes in the middle. If the answer comes immediately, you have picked the right chart. If you have to invent something to fill the space, draw a pie — or, more often than either, a sorted bar chart.
Install Figma Charts — it’s free to try → Browse all 45 chart types →