Skip to content

New: Chartory 1.0. 100 charts free in React, MIT licensed

Read the changelog

Charts / Questions

The best chart for part of a whole

Fourteen charts, and when each one fits.

Short answer

For a few parts that add up to one total, use a donut. To see the split change over time, use stacked bars. With many parts or a hierarchy, use a treemap or a sunburst. To compare the split across groups, use a marimekko.

Updated Nov 2, 2026 · SaaS sample data

October revenue by planOctober revenue, $184K: Enterprise $82K (45%), Business $54K (29%), Team $31K (17%), Starter $17K (9%).Enterprise$82KBusiness$54KTeam$31KStarter$17K
October revenue by plan
PlanRevenueShare
Enterprise$82K45%
Business$54K29%
Team$31K17%
Starter$17K9%

017 · DonutOne total, four parts: who brings October’s $184K.

October revenue by plan and regionOctober revenue by plan, split into North America and the rest; North America brings $87K.NA$41KINTL$41KINTL$30KNA$24KINTL$16KNA$15KINTL$10KNA$7KENTERPRISEBUSINESSTEAMSTARTER
October revenue by plan and region
PlanNAINTL
Enterprise$41K$41K
Business$24K$30K
Team$15K$16K
Starter$7K$10K

030 · TreemapThe same total with a second level: plan, then North America (NA) or the rest (INTL).

Revenue by plan, November to OctoberMonthly revenue by plan in $K, from $156K to $184K; Enterprise grows from 37% to 45%.200150100500JANAPRJULOCTENTERPRISEBUSINESSTEAMSTARTER
Revenue by plan, November to October
MonthEnterpriseBusinessTeamStarter
Nov58483020
Dec60483020
Jan62493019
Feb64493019
Mar66503119
Apr68503118
May70513118
Jun72523118
Jul74523118
Aug77533117
Sep80533117
Oct82543117

003 · Stacked barsThe same four plans month by month, in $K, so the shift shows.

Same $184K

The donut gives the split: Enterprise is 45%. The treemap adds the level inside: North America brings $87K. The stacked bars show how it got there: Enterprise grew from 37% to 45% in a year.

If you ask

All fourteen

TypeUse it whenData shape
003 · Stacked barsParts change over timePeriods × 2–5 parts
017 · DonutTwo to six parts2–6 parts of one total
018 · Semi donutOne part against the restOne part and the rest
019 · Polar areaParts with a cycle4–12 parts in a cycle
020 · Progress ringOne share of a limitOne value and its limit
022 · SunburstParts inside partsTwo levels: parts in parts
030 · TreemapMany parts at onceMany parts, up to two levels
035 · Packed bubblesMany parts, rough sizesMany parts, one value each
047 · MarimekkoSplits across groupsGroups × parts, two totals
068 · IcicleA deep hierarchyThree or more levels
069 · VennOverlaps between setsTwo or three sets and their overlaps
074 · Flame graphWhere time or cost goesA call stack with durations
081 · Context rulerA share of a budgetParts of a fixed budget
097 · IsotypeCounts people can readCounts in whole units

Common mistakes

Too many slices

Past six parts the small slices turn into slivers. Group them into Other, or use a treemap.

Parts that overlap

Survey answers where people pick more than one are not parts of a whole. Use bars, or a venn for the overlaps.

Donuts side by side

Angles are hard to compare across charts. To compare splits between groups, use stacked bars or a marimekko.

Get all fourteen

Every part-of-a-whole chart, and the other 116 types.

In Figma and React, in four sizes, light and dark. Pay once, every update.

See the fourteen in Charts

See plans

Questions

Which one is the pie chart?

017. It draws the full circle, with each part and its value in a list beside it. For one part against the rest, use the semi donut (018).

How many slices can a donut hold?

Up to six read well. Past that, group the small ones into Other, or switch to a treemap.

Do the parts have to add up to 100%?

Yes. Every chart here shows one total. If people can pick more than one answer, use bars, or a venn for the overlaps.

Do these charts come in every size?

Yes. All fourteen come in XS, S, M and L, each laid out again for its size, in light and dark.

Not sure it is a part of a whole? Start from what the chart has to show.

Open the Chart Chooser