Figma pie chart components

Pie charts have a reputation problem and most of it is earned. People judge angles badly, so a pie asks the reader to do the one thing the visual system is worst at.

That does not make the chart useless. It makes it narrow. A pie is for showing that a small number of parts add up to a single whole, and it is bad at almost everything else.

The 3 components and 68 variants above give you the sizes, legends, and hole depths. The harder question is whether the chart in front of you should be a pie at all.

When a pie beats a bar

Three conditions have to be true at once. The slices must sum to something meaningful, the part-to-whole relationship has to be the actual point of the chart, and there have to be few enough slices that the reader can tell a third from a quarter, which in practice means about five. Atlassian's chart selection guide sets out the same test.

Miss any one of the three and a bar chart wins, because length measured from a shared baseline is the comparison people read accurately. Storage used across four plan tiers is a pie. Revenue by month is never a pie.

Five products scored across six attributes is a radar chart. And if the only way to make the finished chart readable is to print every value on top of it, a bar chart would have carried those numbers on its own.

Five sizes, from 120px to 280px

The Size property runs xxs, xs, sm, md, and lg at 120, 160, 200, 240, and 280px square, and every size has a legend variant. Turning the legend on places the labels to the right, so the md chart goes from 240px square to 326px wide and lg goes to 366px.

Five sizes sounds like too many until you try to place one. At 120px the xxs chart is the one you put next to a number in a metric card, where the surrounding copy already says what the slices are, while the lg version with its legend is a card of its own inside a dashboard.

Each of those frames exists twice in the file, once light and once dark, so the dark version is a designed pair rather than an inverted copy.

The hole is a decision, not a finish

The base pie carries a Hole property set to False, 25%, 50%, or 75%, which is the whole difference between a pie and a donut. Open the hole when you have something worth putting in the middle: the total, the headline percentage, the count that the slices are dividing. A donut with an empty center is a pie that gave up area for nothing.

At 75% the shape has thinned into a ring, and at that point you are closer to an activity gauge than a chart, which is a different component with a different job.

Data to Viz catalogues the ways pies get worse from there: 3D, exploded slices, percentages that fail to total 100, and legends parked so far from the chart that reading it becomes a matching exercise. The legend variants here keep the labels adjacent for that reason.

Keeping the chart honest

Size, legend, and hole depth are variant properties, so changing any of them is a swap in the properties panel rather than a redraw, and restyling to your own palette is a style change like anywhere else in the kit.

The part no component can do for you is the slice count. Five segments plus an "Other" bucket reads at a glance; eleven segments in eleven tints of the same blue does not, however tidy the legend looks. Sort the slices largest to smallest from a consistent starting angle, label the values rather than making people match colors across the card, and if two slices are close enough that nobody can tell which is bigger, print the numbers.

When you move to code, the same charts are waiting there. Untitled UI React pie charts are open source, built with Tailwind CSS, with the slice geometry, donut holes, and legends handled for you.