# Treemap chart in Figma

> Nested rectangles sized by value

A treemap tiles a rectangle so each child gets area proportional to its value, nesting to any depth. It handles far more categories than a pie without falling apart, and it makes both the big items and the overall structure visible at once.

## Available in 5 of 5 chart libraries

| Library | Ready-made examples |
| --- | --- |
| Google Charts | 5 |
| Highcharts | 3 |
| D3 · Nivo | 1 |
| ApexCharts | 2 |
| ECharts | 7 |

18 examples in total.

These are the real charting libraries running inside the plugin, not redrawn lookalikes. The treemap chart on your canvas is the library's own output, and the Export tab hands developers that same library's configuration plus React, Vue, Angular or Svelte code — so what you design is what gets built.

## Reach for it when

- Hierarchical composition with many leaves — disk usage, portfolio, budget by team.
- You want the largest contributors to be obvious without sorting.

## Use something else when

- Precise comparison matters; area is read less accurately than length.
- The hierarchy is shallow and small — a bar chart is easier.

## The data it needs

Parent, child and value per row. Leave the parent blank for a root.

| Parent | Child | Value |
| --- | --- | --- |
|   | Engineering |   |
| Engineering | Platform | 240 |
| Engineering | Product | 180 |

---

Install Figma Charts: https://www.figma.com/community/plugin/1345221583582136577/figma-charts

All chart types: https://systergon.com/figma-charts/chart-types