TreeMap
Proportional tiles that fill a rectangle, such as storage by project or spend by category, where each tile's area is its share of the whole.
Component behavior
TreeMap uses a squarified layout to render values as proportional rectangular areas.
Use cases
- Category proportions with many categories or widely varying values.
- Storage, cost, or file-size summaries.
- Proportional values within a fixed rectangular area.
Alternatives
PieChart: a small set of categories is sufficient.
SunburstChart: hierarchy levels must be shown as concentric rings.
BarChart: the task requires precise category ranking.
Props
Pass a flat list of TreeMapNodes, each with a label, value, and optional color. Tiles are laid out for the design width×height aspect and then scaled to fill their container, so those two props set the shape, not the rendered size.
| Prop | Type | Default | Description |
|---|---|---|---|
nodes | TreeMapNode[] | — | Tiles, sized by value. Colors fall back to the shared palette by position. Labels are used as React keys and must be unique. |
width | number | 520 | Design width for the layout aspect ratio. The rendered chart scales to its container. |
height | number | 300 | Design height for the layout aspect ratio. |
formatValue | (node: TreeMapNode) => ReactNode | — | Formats a tile's value for its caption and tooltip. Default renders a localized number. |
Examples
Storage by bucket
import { TreeMap } from "@solarius/onset";
import type { TreeMapNode } from "@solarius/onset";