Online Tool Store
· 4 min read
How to Show Share of Total With a Treemap
Heshan Fernando
Co-founder & COO
You’ve got a budget with forty line items and you need one picture that shows where the money goes. A pie chart with forty slices is unreadable. A bar chart with forty bars is a wall of labels that scrolls off the screen.
A treemap handles that case: rectangles whose areas are proportional to values, packed into one frame. It’s the right tool for a specific job, and the wrong one for several jobs people reach for it to do.
What a treemap is good at
Each rectangle’s area equals its share of the total. Housing at 1,450 out of a 3,200 budget takes 45% of the canvas, whatever shape that rectangle ends up being.
That makes treemaps genuinely good at two things. First, showing share of a whole across many categories at once — dozens, where a pie chart fails at about six. Second, showing hierarchy: group items into parent blocks and you can see both the department’s total and its internal split in one view.
What they’re bad at is precise comparison. People judge length well and area poorly, and the effect is worse when rectangles have different aspect ratios — a tall thin rectangle and a wide flat one of identical area look different sizes. That’s not a rendering flaw; it’s how visual perception works, and it’s why every good treemap labels its values.
Why people get stuck here
- Using one for exact comparison. If the question is “is A bigger than B”, a bar chart answers it better every time.
- Too many tiny rectangles. A long tail of small items produces slivers with no room for labels.
- Colour doing two jobs. Encoding category and magnitude in the same colour channel makes both unreadable.
- Negative values. They have no meaning in an area chart, and no sensible way to draw them.
What a good treemap looks like
Values labelled on the tiles
Put the number on the rectangle wherever it fits. It costs nothing and it removes the main weakness of the format. If a tile is too small for a label, that tile probably belongs in an “Other” group.
Colour with one job
Use colour for category, or for magnitude, never both. Category colour with size carrying the value is the usual, clearest choice.
A grouped tail
Below a few percent, individual items stop being legible. Group everything under the threshold into a single “Other” block and list the contents beneath the chart.
| Chart | Best For | Weakness |
|---|---|---|
| Pie | Two to five categories | Fails past a handful of slices |
| Bar | Precise comparison | Unwieldy past ~20 categories |
| Treemap | Many categories, share of whole | Area is hard to judge precisely |
Common mistakes to avoid
- Reaching for a treemap when a sorted bar chart would be clearer and easier to read.
- Including negative values, which the format simply cannot represent.
- Using a rainbow palette across categories, which implies an order that doesn’t exist.
- Nesting three levels deep, at which point the inner rectangles are too small to see.
- Comparing two treemaps side by side with different totals — the areas aren’t comparable between them.
How to do it with Treemap Maker
The Treemap Maker builds the chart in your browser, with labels on by default.
- Enter one label and value per line, with an optional category to group by.
- Choose whether colour carries category or magnitude — one or the other.
- Check the smallest rectangles still show a label; group the tail into “Other” if not.
- Confirm the values total what you expect before presenting it.
For the same data as a chart with precise comparison, the tools directory has bar and comparison chart builders that run the same way.
Frequently asked questions
When is a treemap better than a bar chart?
When you have more categories than a bar chart can show comfortably and you care about proportion rather than exact ranking. Below about fifteen categories, a sorted bar chart is nearly always easier to read.
Why are treemap comparisons hard?
Because area judgement is weaker than length judgement, and aspect ratio distorts it further. Research on graphical perception has consistently ranked position and length above area for accurate reading — which is why labels matter here more than in most charts.
Can I show negative values?
No. Area can’t be negative. Split negatives into a separate view, or use a chart type that has a baseline.
Final thought
Use a treemap when the sentence you want the reader to leave with starts “most of it goes to…”. If the sentence is “A is 12% bigger than B”, draw bars instead.