# How to Make a Pie Chart in Figma (and When Not To)
_August 22, 2026 · 11 min read · by Systergon_
> Most of the criticism aimed at pie charts is correct: they encode share as angle, and people read angle badly. But a pie does one thing no bar chart matches — it shows that the parts make a whole. The question is never whether pie charts are bad, but whether you need the completeness more than the precision. When a pie earns its place, the five-slice ceiling, pie versus donut, why 3D pies change the numbers, and what to draw instead.
Tags: Figma, Charts, Pie Chart, Data Visualization, Plugin
URL: https://systergon.com/blog/figma-charts-pie-chart
---
[Install Figma Charts — it’s free to try →](https://www.figma.com/community/plugin/1345221583582136577/figma-charts) [See the pie chart gallery →](https://systergon.com/figma-charts/chart-types/pie)

No chart type has been argued about more. The case against the pie chart is genuinely strong — it encodes value as angle, which people judge poorly, and it makes comparison between slices harder than a bar chart makes it. The case for it is narrower than its popularity suggests and stronger than its critics admit: a pie is the only common chart where the _whole_ is visible as an object, and sometimes the whole is the point.

![A pie chart drawn by Highcharts inside the Figma Charts plugin](https://systergon.com/blog/figma-charts-pie-chart/images/pie-basic.svg)

_Real plugin output — a Highcharts pie captured from the editor. Every chart on this page came out of the plugin the same way._

So this page is a verdict rather than a tutorial with a tutorial attached. The case against, the three situations where a pie genuinely wins, the ceiling on slices, what the five libraries give you, and how to build one that does not mislead.

## 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, so the pie on your canvas is the library’s own output, with its own label placement and its own start angle.

[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, and pick **Pie** from the category filter. There are **38 pie examples** across the five libraries.

## The case against, stated fairly

**Angle is a weak channel.** Ranked by how accurately people read them, position beats length, length beats angle, and angle beats area and colour. A pie asks readers to compare angles — and worse, angles at different orientations, since one slice starts at twelve o’clock and another starts halfway round.

**Comparison degrades with distance.** Two adjacent slices can be compared reasonably. Two slices on opposite sides of the circle cannot, because there is no shared baseline and no common edge to align them against. A bar chart has one baseline for every category, which is precisely why it wins on comparison.

**Small slices become unreadable and unlabelable.** Below about 5% a slice is a sliver, its label does not fit inside it, and the leader line pointing at it takes more room than the slice itself.

## The three times a pie wins anyway

**1. The whole is the subject.** “This is all of our revenue, and here is how it divides” is a claim a pie makes structurally — the circle is the total, and the reader can see there is nothing outside it. A bar chart of the same numbers shows the parts and says nothing about whether they add up to everything.

**2. One slice dominates and that is the message.** “Three quarters of our traffic comes from one channel” is instantly legible as a pie and takes a moment of reading as a bar chart. Halves, thirds and quarters are the angles people _can_ judge, because they are anchored to the geometry of the circle.

**3. There are two or three parts.** With two slices the comparison is trivially accurate; with three it is still fine. The pie’s weaknesses are all weaknesses at scale.

## Five pies from the gallery, and what each changes

![An exploded pie chart drawn by Google Charts](https://systergon.com/blog/figma-charts-pie-chart/images/pie-exploded.svg)

_Exploding a slice pulls it out of the circle to emphasise it. It also breaks the one thing the pie had going for it — the intact whole — and makes the remaining angles harder to compare. Use it for one slice, never for all of them._

![A variable radius pie chart drawn by Highcharts](https://systergon.com/blog/figma-charts-pie-chart/images/pie-variable-radius.svg)

_A variable-radius pie encodes a second variable in each slice’s radius. It is genuinely dense and genuinely hard to read: the eye reads slice area, which is now a product of two variables, so neither is legible on its own._

![A 3D pie chart drawn by Highcharts](https://systergon.com/blog/figma-charts-pie-chart/images/pie-3d.svg)

_The 3D pie is the clearest example in this whole series of decoration that changes the numbers. Perspective enlarges the slices at the front and compresses those at the back, so two equal shares are drawn at different sizes. It is in the gallery because clients ask for it; it should not be in your design._

![A pie chart with aligned labels drawn by ECharts](https://systergon.com/blog/figma-charts-pie-chart/images/pie-label-align.svg)

_Label placement is the pie chart’s hardest layout problem. Aligning labels in columns with leader lines keeps small slices legible without the labels colliding — the fix worth reaching for before you consider dropping to a legend._

![A polar area chart drawn by ApexCharts](https://systergon.com/blog/figma-charts-pie-chart/images/pie-polar-area.svg)

_The polar area chart — Florence Nightingale’s rose — gives every segment the same angle and varies the radius instead. It is a different chart with a different failure mode: because area grows with the square of the radius, it exaggerates large values._

## The five-slice ceiling

The practical limit is about five slices, and it comes from three constraints at once: labels stop fitting inside slices, adjacent hues stop being distinguishable, and small slices stop being comparable. Past five, group the tail into an explicit “Other” category — and label it honestly, because an unexplained “Other” that is larger than several named slices is a chart hiding its own subject.

If you cannot group the tail because every category matters, that is a sign the chart is wrong rather than the data. A sorted [bar chart](https://systergon.com/blog/figma-charts-bar-chart) handles twenty categories without complaint; a pie cannot handle eight.

## What to do with the tail

Almost every real dataset has a long tail: three categories that matter and eleven that do not. How you handle those eleven is the difference between a pie that communicates and a pie that decorates.

**Group them, and name the group honestly.** “Other (11 categories, none above 2%)” tells the reader exactly what has been folded away and lets them decide whether it matters. A bare “Other” invites the suspicion that something inconvenient is hiding in it.

**Keep “Other” from being the biggest slice.** If the grouped tail outweighs your largest named category, the chart is telling you the data is not concentrated enough for a pie. Either raise the threshold so more categories are named, or accept that the story is diffuse and use a ranked bar chart which can carry all fourteen.

**Give it the neutral colour.** “Other” is context, not a category, so it should be the greyest thing in the palette and it should sit last in the order — conventionally at the end of the sequence, just before the start angle comes round again.

**Google Charts can do the grouping for you.** Its pie takes a visibility threshold: slices below a proportion you set are combined automatically. That is convenient and worth a caution — an automatic threshold changes what is named as your data changes, so a chart that read clearly last quarter can quietly fold a newly-important category into the tail this quarter.

## Three times a pie is simply wrong

**1. Comparing two pies.** Two pies side by side is one of the most common charts in business decks and one of the least readable. The reader has to compare angles across two circles with no shared baseline and, usually, two different totals — so a slice that grew in absolute terms can shrink as a share, and the chart shows only the second thing while everyone reads the first. A grouped bar chart, or a 100% stacked bar per period, answers the question the two pies were asked.

**2. Anything with a time axis.** Shares over four quarters is four pies, and four pies is a memory test. Composition over time is what a stacked [area chart](https://systergon.com/blog/figma-charts-area-chart) or a 100% stacked bar chart exists for; both keep the periods adjacent and let the eye follow one band across.

**3. Ranking.** If the question is “which is biggest, and by how much?”, a pie answers the first half badly and the second half not at all. Rank comparisons want a common baseline. This is the case where the pie is not merely weaker than a bar chart — it is answering a different question from the one being asked.

## Why two pies are worse than they look

It is worth being specific about the two-pie failure, because it is so widespread. Say Q1 revenue is £1m split 50/30/20, and Q4 revenue is £2m split 40/35/25. Product A grew from £500k to £800k — substantial growth — and its slice _shrank_ from half the circle to 40%. Every reader who takes the visual at face value concludes A declined.

Pies show shares. Shares move when either the numerator or the denominator moves, and the chart cannot tell you which. If the totals differ between your two pies, you must either state the totals prominently, size the circles by total (which introduces area-comparison error), or use a chart that carries magnitude — which is to say, use bars.

## Styling it well

**Label the slices, do not legend them.** Every lookup you remove is attention returned to the data. Percentage plus category name, on or beside each slice, is the target; leader lines are fine and much better than shrinking the type.

**Give the two decimal places up.** “24.7%” on a chart whose encoding cannot distinguish 24 from 26 is false precision. Round to whole percentages unless the difference between 24.7 and 24.9 genuinely matters — and if it does, you need a table, not a pie.

**One accent, or a full palette, never half.** Either every slice is a distinct hue (categorical data, no order implied) or one slice is accented and the rest are neutral greys (one thing is the subject). A palette where three slices share a colour family and two do not implies a grouping that is not in the data.

**Mind the stroke.** A hairline separator in the background colour between slices makes adjacent similar hues legible and costs nothing. A heavy stroke, on the other hand, eats the small slices — at 3px a 2% slice is mostly border.

**Let the circle breathe.** Pies are usually drawn too large for their frame, which pushes labels into the edges. The chart needs the same margin discipline as any other type, and the labels are part of the chart, not an overlay on it.

For type and colour, bind them to your design system rather than picking by hand — the plugin can build a palette from your Figma colour variables, covered in [Your chart, your design system](https://systergon.com/blog/figma-charts-design-system-colors-typography-tokens).

## Building one, step by step

![The Figma Charts gallery with the Pie category selected showing live pie chart previews](https://systergon.com/blog/figma-charts-pie-chart/images/step-gallery.webp)

_**1. Pick a starting point.** Library tab, then the **Pie** chip. Every tile is live output, so you are choosing a real layout — particularly the label strategy, which is the hardest thing to change later._

![The Figma Charts editor with a pie chart in the preview](https://systergon.com/blog/figma-charts-pie-chart/images/step-editor.webp)

_**2. The editor.** Live preview above, tabs below. For a pie the Essential / Common / Advanced control matters: Essential drops the title and legend, which is right for a card and wrong for a standalone chart where the labels are the only way to read it._

![The Data tab showing a table of category labels and values](https://systergon.com/blog/figma-charts-pie-chart/images/step-data.webp)

_**3. Your numbers.** One label column, one value column — the simplest shape in the plugin. This is also where you decide the slice order, because slices are drawn in data order._

![The Configuration tab showing option groups](https://systergon.com/blog/figma-charts-pie-chart/images/step-config.webp)

_**4. Configure.** Start angle, label position, leader lines and the palette all live here. Sorting by value and starting the largest slice at twelve o’clock is the convention worth following._

![The Export tab showing code export formats](https://systergon.com/blog/figma-charts-pie-chart/images/step-export.webp)

_**5. Export.** A working component for React, Vue 3, Angular, Svelte or vanilla JavaScript, at the same major version the plugin rendered with._

![The + SVG and + PNG insert buttons](https://systergon.com/blog/figma-charts-pie-chart/images/step-insert.webp)

_**6. Insert.** SVG gives you each slice as its own vector shape — which makes a pie one of the most rewarding charts to insert as vector, since restyling one slice is a click._

## The data shape it needs

**Name and value**, one row per slice. No axes, no series, nothing to reshape — which is why pies are the easiest charts to build from a two-column range in a spreadsheet.

Two cautions. **The values should be parts of one whole**: if they do not sum to something meaningful, the circle is asserting a total that does not exist. And **percentages that do not add to 100** — because of rounding, overlapping categories or multi-select survey answers — break the chart’s central claim. Multi-select responses are the most common offender: people can pick three answers, so the “shares” sum to 240% and a pie of them is nonsense. Use a bar chart.

## Library by library

All five draw pies; the **38 examples** split ECharts 18, Highcharts 8, Google 5, ApexCharts 4, Nivo 3.

- **ECharts — 18 examples**, including the best label-placement options in the plugin (aligned labels with leader lines, edge alignment) and the pie-in-matrix layouts for small multiples.
- **Highcharts — 8**, and the widest variant range: variable radius, semi-circle, donut and the 3D versions. Commercial licence required to ship commercially.
- **Google Charts — 5**, the plainest look, plus a useful _visibility threshold_ option that groups tiny slices automatically.
- **ApexCharts — 4**, including the polar area chart above, and the second library the Inspector works with.
- **Nivo — 3**: the D3 look with excellent default label handling. React-only export.

Note also where the **donut** lives: only ApexCharts files it as its own category, while Highcharts, Google, ECharts and Nivo all keep their donuts inside Pie. That is a filing difference, not a capability one — see [the donut post](https://systergon.com/blog/figma-charts-donut-chart).

## Reading it well — and the ways it misleads

**Start angle is rhetoric.** The slice starting at twelve o’clock reads as the primary one. Rotating the pie changes which slice gets that position without changing a single number — the pie’s equivalent of a truncated axis, and much less noticed.

**Sort order is the other half of that.** Convention is largest first, clockwise from twelve. Deviating is allowed when the categories have a natural order, and suspicious otherwise.

**3D is not a style.** Perspective makes front slices larger and back slices smaller, so equal values are drawn unequal. There is no way to read a 3D pie accurately, which means the decision to use one is a decision that accuracy does not matter.

**Colour has to work harder here than anywhere else.** With five slices you need five hues that are distinguishable adjacent to each other and against the background, and that survive colour vision deficiency. This is the chart type where a sequential ramp is most tempting and least appropriate: the categories are not ordered, so a ramp implies a progression that does not exist.

**Labels beat legends.** A legend forces a lookup: read the colour, find it in the list, come back. Labels on or beside the slices remove that entirely. If the slices are too small for labels, the pie is too crowded — which is the same conclusion as the five-slice ceiling, arrived at from the other direction.

## Accessibility

**Never rely on colour alone.** Direct labels solve this completely, and a pie usually has few enough slices to label. Where you must use a legend, order it to match the slice order rather than alphabetically.

**Check adjacent hues, not just contrast against white.** Two colours can each pass against the background and be indistinguishable from each other — which is the failure that matters when they share an edge.

**Give it a text equivalent.** The Export tab’s **Copy Alt Text**, **Copy Data Table** and **Set Node Desc** produce a description, a table of the underlying numbers, and a description attached to the Figma node. For a pie, include the percentages in the table — they are what the chart is actually communicating.

## Common questions

### How many slices can a pie chart have?

About five. Past that, labels stop fitting, adjacent hues stop being distinguishable, and small slices stop being comparable. Group the tail into an explicit “Other” — and if you cannot, the honest chart is a sorted bar chart.

### Is a pie chart ever better than a bar chart?

Yes, in three situations: when the whole is the subject and the reader needs to see that the parts account for everything; when one slice dominates and that dominance is the message; and when there are only two or three parts. Outside those, a bar chart is more accurate.

### Should I use a 3D pie chart?

No. Perspective enlarges the slices nearest the viewer and compresses those at the back, so equal shares are drawn at different sizes. It is decoration that changes the numbers — the plugin ships one because people ask, not because it is defensible.

### Where should the largest slice start?

At twelve o’clock, running clockwise, with the rest in descending order. The slice at twelve reads as primary, so that position is a rhetorical choice; making it the largest is the convention that surprises nobody.

### What is a polar area chart?

A rose diagram: every segment gets an equal angle and the value is carried by the radius instead. ApexCharts ships one. It reads beautifully and exaggerates — area grows with the square of the radius, so a value twice as large occupies four times the ink.

### My percentages do not add up to 100. Can I still use a pie?

No. If the categories overlap — multi-select survey answers are the classic case — the circle is asserting a whole that does not exist. Use a bar chart of the individual percentages.

### Pie or donut?

A donut is a pie with a hole, and the hole is the reason to choose one: it is somewhere to put the total. If you have no total worth showing, the hole is just a hole. Only ApexCharts files donuts as their own category; the others keep them under Pie.

### Does the chart stay editable in Figma?

Insert as **SVG** and every slice is a separate vector shape with real text labels, which makes restyling or highlighting a single slice trivial on the canvas. Insert as **PNG** for a flat image at twice the pixel density.

## Where to start

Open the plugin, put your real shares into a pie, and count the slices. If there are more than five, you have already learned the most useful thing this page has to offer — and the fix is either an honest “Other” or a different 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)