# How to Make a Donut Chart in Figma (the Hole Is the Point)
_August 22, 2026 · 11 min read · by Systergon_
> A donut is a pie with a hole, and almost everything written about it treats the hole as a style preference. It is not — it is somewhere to put the total, and a chart that answers “how much altogether?” and “how does it divide?” in one object is doing something a pie cannot. Where each library files its donuts, how big the hole should be, why concentric rings are unreadable, the failure mode unique to donuts, and designing one for a KPI tile.
Tags: Figma, Charts, Donut Chart, Dashboards, Plugin
URL: https://systergon.com/blog/figma-charts-donut-chart
---
[Install Figma Charts — it’s free to try →](https://www.figma.com/community/plugin/1345221583582136577/figma-charts) [See the donut chart gallery →](https://systergon.com/figma-charts/chart-types/donut)

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.

![The Figma Charts gallery showing live chart previews in a four-column grid, each rendered with the current colour palette](https://systergon.com/figma-charts-help/chart-grid-light.webp)

## First — get the plugin

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 →](https://www.figma.com/community/plugin/1345221583582136577/figma-charts)

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.

## Where the donuts actually are

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.**

- **ApexCharts** — a dedicated **Donut** category with basic, gradient and semi-donut examples.
- **Highcharts** — donut, 3D donut and semi-circle donut, filed under **Pie**.
- **ECharts** — doughnut and half-donut examples, filed under **Pie**.
- **Google Charts** — a donut example, filed under **Pie**.
- **Nivo** — a pie with an inner radius set, filed under **Pie**.

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.

## What the hole is for

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.

## When to use it — and three times you should not

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](https://systergon.com/blog/figma-charts-pie-chart#when) 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.

## The data shape it needs

Exactly a pie’s — the **name-value** shape:

- **One column of labels**, one per segment.
- **One column of values**, a single number each.

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.

## Build it in Figma Charts

1. **Open the plugin.** Pick the **Donut** chip under ApexCharts, or the **Pie** chip under any other library and choose a donut example there.
2. **Put your real categories in on the Data tab.** Label length decides whether the chart works, so use the real ones early.
3. **Sort largest to smallest** in the data table unless the categories have a natural order — segments are drawn in data order.
4. **Set the inner radius.** This is the one control specific to donuts, and it is a real design decision — see below.
5. **Insert with + SVG**, then place the total in the centre as a Figma text layer if the library has not drawn one.

![The Data tab of the Figma Charts editor showing the editable data table with a column of category labels and a column of values](https://systergon.com/figma-charts-help/data-panel-manual-light.webp)

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.

## Choosing the inner radius

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](https://systergon.com/figma-charts/chart-types/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.

## Library by library

- **ApexCharts** — the only dedicated **Donut** category, with 3 examples: basic, gradient and semi donut. Clean modern defaults, and one of the two libraries the **Inspector** works with, which is genuinely useful for pushing labels around.
- **Highcharts** — donut, 3D donut and semi-circle donut inside its 8 pie examples. Also Inspector-capable. Needs a commercial licence to ship commercially.
- **ECharts** — doughnut and half-donut among 18 pie examples, the largest set, including rich label callouts and rose variants.
- **Google Charts** — a donut inside 5 pie examples. Plain and instantly familiar.
- **Nivo** — set an inner radius on a pie. Good default label handling and the D3 look; React-only at export.

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.

## Styling it well

**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](https://systergon.com/blog/figma-charts-design-system-colors-typography-tokens).

## Reading it well — and the ways it misleads

**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.

## The donut as a KPI tile

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.

## Accessibility

**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.

## Export and handoff

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](https://systergon.com/blog/figma-charts-export-react-vue-svelte-angular-design-tokens) 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.

## Common questions

### Is a donut chart better or worse than a pie chart?

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.

### Why is there no Donut category under Highcharts or ECharts?

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**.

### How big should the hole be?

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.

### How many segments can a donut carry?

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.

### Can I nest several donuts as concentric rings?

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.

### Should the number in the middle be the sum of the segments?

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.

### What is a semi-donut for?

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.

### Can I animate a donut chart in a Figma prototype?

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](https://systergon.com/blog/figma-charts-animated-charts-native-figma-prototypes#smart-animate).

## Where to start

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](https://systergon.com/blog/figma-charts-pie-chart) — or, more often than either, a sorted [bar chart](https://systergon.com/blog/figma-charts-bar-chart).

[Install Figma Charts — it’s free to try →](https://www.figma.com/community/plugin/1345221583582136577/figma-charts) [Browse all 45 chart types →](https://systergon.com/figma-charts/chart-types)