Treemap

A treemap shows parts of a whole as nested rectangles, where the area of each rectangle is proportional to its value. Large categories take up more space; small ones take up less. Unlike a pie chart, a treemap can show hierarchy — rectangles nested inside rectangles — and it scales gracefully to dozens or hundreds of categories where a pie chart breaks down.

Treemaps are excellent for "here's the composition of this thing" and decent for "here's how the composition is itself composed." They're a poor choice for precise comparisons or for data without a natural whole.

When to use it

Use a treemap when all three are true:

1. Your data sums to a meaningful total. Budget split across departments, revenue by product, disk usage by folder. If there's no natural "whole," a treemap misleads — use a bar chart instead.
2. You have many categories, or the categories have structure. Pie and donut charts work up to about 5–6 slices; treemaps handle 20+ gracefully. If your data has hierarchy (departments → teams, categories → subcategories), treemaps show it naturally.
3. Readers care about composition, not precise values. Treemaps let you see "which pieces dominate" at a glance, but comparing two similarly-sized rectangles precisely is hard. If exact values matter, pair the treemap with a data table.

Common uses: budget allocation, portfolio composition, disk space usage, product catalog revenue, market cap of stocks in an index, population by region.

Flat vs hierarchical

Treemaps come in two forms, and the distinction shapes both your data and how the chart reads.

Variant	Structure	Use it when...
Flat treemap	One level of rectangles	You have many categories (10+) and no natural hierarchy
Hierarchical treemap	Rectangles grouped inside parent rectangles	Your data has two or more levels (category → subcategory)

The two answer different questions:

• Flat: "Of our 15 product lines, which drive most revenue?" — The big rectangles are the dominant products; small ones are the long tail.
• Hierarchical: "How is the company budget split across departments, and within each department, across teams?" — The outer rectangles show department-level allocation; the nested rectangles show team-level allocation inside each one.

A flat treemap is essentially a compact, scalable alternative to a pie chart. A hierarchical treemap tells a structural story that a pie chart can't tell at all.

Example data

Treemap data is nearly identical to bar chart data for the flat version, and nested for the hierarchical version.

Flat data

One row per category, with a value. Here's monthly revenue by product line for a subscription business:

Product line	Revenue ($k)
Enterprise plan	1,450
Team plan	880
Pro plan	540
Starter plan	320
Add-on: analytics	210
Add-on: SSO	180
Add-on: API	140
Training	95
Consulting	70
Certifications	40

Ten rectangles, sized by revenue. The Enterprise plan dominates the layout visually — which is exactly the point. Showing this as a pie chart with ten slices would be a mess; a treemap handles it cleanly.

Hierarchical data

One row per bottom-level item, with a parent column to establish structure. Same business, grouped into two categories:

Category	Product	Revenue ($k)
Plans	Enterprise plan	1,450
Plans	Team plan	880
Plans	Pro plan	540
Plans	Starter plan	320
Add-ons	Analytics	210
Add-ons	SSO	180
Add-ons	API	140
Services	Training	95
Services	Consulting	70
Services	Certifications	40

Plotted as a hierarchical treemap, you'd see three large rectangles (Plans, Add-ons, Services) sized by their totals, each subdivided into the individual products. You now see two layers of story: which category dominates, and which product dominates within each category.

The same principle extends to three or four levels (region → country → city → store), but each extra level of nesting makes labels harder to place and cells harder to read. Two levels is the sweet spot.

How to read it

Treemaps are scanned in two passes:

1. Look at the biggest rectangles. Those are the dominant categories. In most real-world data, a few items are huge and the rest are small — treemaps make that imbalance impossible to miss.
2. Scan the small rectangles in clusters. The long tail is where you'd find opportunities or problems — underperforming products, overlooked line items. In a hierarchical treemap, the small rectangles inside a large parent tell you the composition of that parent.

Two limits to keep in mind:

• Comparing similarly-sized rectangles is hard. Human eyes aren't precise at comparing rectangles of different aspect ratios — a tall skinny rectangle and a short wide one with the same area look different. If the story depends on "X is slightly bigger than Y," use a bar chart instead.
• Very small cells lose their labels. A rectangle that's 5 pixels across can't fit a label. Most tools either hide labels on small cells or show them on hover. If you need every item labeled, your data has too many categories for a treemap — aggregate smaller items into an "Other" cell.

Treemap vs. pie, donut, and sunburst — which to use?

These four charts all show parts of a whole. Pick based on your data:

• Pie or donut for 2–5 categories, flat data, and an audience that won't want to read a full tutorial. Simple and familiar.
• Treemap (flat) for 6+ categories, flat data. Scales where pie charts break down.
• Treemap (hierarchical) for data with 2 levels. The nested rectangles show structure clearly.
• Sunburst for data with 3+ levels of hierarchy. Same idea as a hierarchical treemap but laid out as concentric rings, which readers find slightly easier for deep hierarchies.

The rough rule: as you add more categories or more levels, move from pie → treemap → sunburst. Going backward (sunburst for 3 categories, pie for 30) is always wrong.

How to build one

In a spreadsheet (Excel or Google Sheets)

• Excel has a native Treemap chart. Arrange your data as a two-column table for flat treemaps (category, value) or a three-column table for hierarchical ones (parent, item, value). Then Insert → Charts → Treemap.
• Google Sheets has a native Treemap chart as well: Insert → Chart → Chart type → Tree map. It supports hierarchy through a "Parent" column.

Both tools will auto-lay-out the rectangles using a "squarified" algorithm that keeps cells close to square — that's why your rectangles look roughly square rather than long thin strips.

With code (for a dashboard or report)

Most libraries take long-form data with a parent column for hierarchy:

// Long form with parent column — what Plotly, ECharts, and D3 expect
const data = [
  // Root nodes (no parent)
  { id: "Plans",    parent: "",        value: 0 },
  { id: "Add-ons",  parent: "",        value: 0 },
  { id: "Services", parent: "",        value: 0 },

  // Leaf nodes (have parent, have value)
  { id: "Enterprise plan", parent: "Plans",    value: 1450 },
  { id: "Team plan",       parent: "Plans",    value: 880  },
  { id: "Pro plan",        parent: "Plans",    value: 540  },
  { id: "Starter plan",    parent: "Plans",    value: 320  },
  { id: "Analytics",       parent: "Add-ons",  value: 210  },
  { id: "SSO",             parent: "Add-ons",  value: 180  },
  // ... etc.
];

Parent nodes usually get value 0 because their size is computed automatically as the sum of their children. For flat treemaps, skip the root nodes entirely and just include the items with parent: "".

Tips

• Sort by value within each level. Most tools do this automatically — the biggest rectangle goes in the top-left corner. Don't override it unless you have a strong reason.
• Color by category, not by value. Treemap cells are already sized by value, so using color for the same thing is redundant. Use color to distinguish categories (all "Plans" one color, all "Add-ons" another), or to highlight a specific group.
• Aggregate the long tail into "Other." If you have 50 categories and the bottom 30 are each under 1% of the total, their rectangles will be unreadable slivers. Group them into a single "Other" rectangle and put the detail in a table.
• Don't use gradients or 3D effects. These distort the area-to-value relationship, which is the whole point of the chart. Flat solid fills only.
• Avoid more than two levels of hierarchy. Three-level treemaps (category → subcategory → item) become cluttered fast. Switch to a sunburst or an interactive "drill-down" treemap where clicking a parent zooms into its children.
• Label by hover if cells are small. Rather than cramming tiny text into every cell, let small cells display labels only on hover or click. Users scan the big cells and drill into small ones as needed.