# Donut chart in Figma

> A pie with the middle freed up for a total

A donut is a pie with a hole, which removes the centre where angles are hardest to judge anyway and gives you somewhere to put the headline number. In practice that centre label is the main reason to choose one.

## Available in 1 of 5 chart libraries

| Library | Ready-made examples |
| --- | --- |
| ApexCharts | 3 |

3 examples in total.

These are the real charting libraries running inside the plugin, not redrawn lookalikes. The donut chart on your canvas is the library's own output, and the Export tab hands developers that same library's configuration plus React, Vue, Angular or Svelte code — so what you design is what gets built.

## Reach for it when

- The same cases as a pie, plus you want the total in the middle.
- A KPI tile where one figure leads and the breakdown supports it.

## Use something else when

- The same cases a pie fails at — a hole does not fix too many slices.
- You are stacking several donuts to compare; use bars.

## The data it needs

Labels and values, exactly like a pie.

| Category | Value |
| --- | --- |
| Alpha | 120 |
| Beta | 80 |
| Gamma | 45 |

---

Install Figma Charts: https://www.figma.com/community/plugin/1345221583582136577/figma-charts

All chart types: https://systergon.com/figma-charts/chart-types