# Circle Packing chart in Figma

> Nested circles sized by value

Circle packing nests circles inside circles, each sized by value. It wastes space compared with a treemap but reads as a hierarchy much more immediately, because containment is obvious in a way that adjacency is not.

## Available in 1 of 5 chart libraries

| Library | Ready-made examples |
| --- | --- |
| D3 · Nivo | 1 |

1 examples in total.

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

- Showing hierarchy structure to an audience that will not study the chart.
- Deep nesting where "inside" needs to be unmistakable.

## Use something else when

- Space is tight — the gaps between circles are dead area.
- Comparing sizes precisely; circle area is hard to judge.

## The data it needs

Parent, child and value per row.

| 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