# Treemap vs sunburst

> Two ways to show parts inside parts.

**Short answer.** Use a treemap when there are many parts and you want to see them all at once, as rectangles. Use a sunburst for a round view of a total, its parts and their sub-parts, when the levels matter more than exact sizes.

Updated Nov 2, 2026 · AI sample data

## 030 · Treemap

Every team and model at once: Research spends $20.2K.

Model spend, treemap. Model spend in October 2026, $48.2K by team: Research $20.2K, Support $15.9K, Search $9.1K, Agents $3.0K.

| Team | Model | Spend |
| --- | --- | --- |
| Research | Atlas 3 | $11.8K |
| Research | Orion XL | $8.4K |
| Support | Kite 2 Pro | $9.6K |
| Support | Nova | $6.3K |
| Search | Atlas 3 | $5.2K |
| Search | Nova | $3.9K |
| Agents | Orion XL | $1.9K |
| Agents | Kite 2 Pro | $1.1K |

## 022 · Sunburst

The same $48.2K in rings: teams inside, models outside.

Model spend, sunburst. Model spend in October 2026, $48.2K by team: Research $20.2K, Support $15.9K, Search $9.1K, Agents $3.0K.

**Same $48.2K.** The treemap fits every part on the card and makes the big ones obvious. The sunburst shows the levels: which team, then which model. Atlas 3 is the biggest model in Research, Nova the smaller one in Search.

## If you ask

| Question | Use a |
| --- | --- |
| Which parts are biggest, out of many? | Treemap |
| What sits inside each part? | Sunburst |
| Are the names long? | Treemap |
| Is the total the centre of the story? | Sunburst |

## Treemap and Sunburst compared

|  | Treemap | Sunburst |
| --- | --- | --- |
| Answers | Which parts are biggest | How a total breaks down by level |
| Shows | Nested rectangles | Rings around a centre |
| Best when | Many parts, up to two levels | Two or three levels, few parts |
| Avoid when | Sizes are close and need exact comparison | There are many small parts |
| Data shape | Parts with a value, in groups | A total, parts and sub-parts |

## Common mistakes

### Treemap

- **Too many levels.** Past two, the small tiles vanish.
- **Colour for size.** Size already carries the value; use colour for the group.

### Sunburst

- **Many thin slices.** The outer ring turns into slivers. Group the small parts.
- **Comparing across rings.** Arcs in different rings are hard to compare.

## Other ways to show it

- [068 · Icicle](https://usechartory.com/charts/icicle): Part of a whole · AI data
- [017 · Donut](https://usechartory.com/charts/donut): Part of a whole · SaaS data
- [047 · Marimekko](https://usechartory.com/charts/marimekko): Part of a whole · E-commerce data

## Treemap, sunburst and the other 130 types.

In Figma and React, in four sizes, light and dark. Pay once, every update. [See plans](https://usechartory.com/pricing). [Treemap type page](https://usechartory.com/charts/treemap) · [Sunburst type page](https://usechartory.com/charts/sunburst)

## Questions

### Which is easier to read?

The treemap for exact sizes; the sunburst for the levels.

### How many levels fit?

Two read well in both; the sunburst can take a third.

### Do both come in every size?

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

### Do they install the same way?

Yes, one command each: npx shadcn add @chartory/treemap and npx shadcn add @chartory/sunburst.

## More comparisons

- [Donut vs semi donut](https://usechartory.com/compare/donut-vs-semi-donut)
- [Histogram vs box plot](https://usechartory.com/compare/histogram-vs-box-plot)
- [Slope vs dumbbell](https://usechartory.com/compare/slope-vs-dumbbell)
- [Gantt vs block timeline](https://usechartory.com/compare/gantt-vs-block-timeline)

Still not sure? Start from what the chart has to show. [Open the Chart Chooser](https://usechartory.com/chooser)