# Tree chart in Figma

> A hierarchy drawn as branches

A tree diagram draws parent-child structure explicitly, with a root and branches rather than nesting. Where a treemap encodes value as area, a tree encodes structure as position — so it is the better choice when the shape of the hierarchy is the point.

## Available in 3 of 5 chart libraries

| Library | Ready-made examples |
| --- | --- |
| Highcharts | 1 |
| D3 · Nivo | 1 |
| ECharts | 7 |

9 examples in total.

These are the real charting libraries running inside the plugin, not redrawn lookalikes. The tree 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

- Structure over quantity: decision trees, site maps, taxonomies.
- Depth and branching factor need to be visible.

## Use something else when

- Values matter more than structure — treemap or sunburst.
- The tree is very wide; horizontal space runs out fast.

## The data it needs

Parent and child per row. Leave the parent blank for the 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