Treemap Chart React component
A squarified treemap of a two-level hierarchy: tile area follows value, tiles are coloured by growth from red through neutral to green, groups carry labelled headers, and clicking a group zooms into it with tiles gliding to their new places.
About the Treemap Chart component
Treemap Chart shows how a total splits into groups and items as nested rectangles whose area follows value, so the biggest contributors jump out. Tiles are coloured by growth (red to green) or by group, and every group has a header with its total.
Click a group, its header or press Enter to zoom in: the tiles glide to their new places and a breadcrumb takes you back. Hover, tap or use the arrow keys for each tile's share of its group and of the total.
When to use it
Use it for revenue by region and product, cloud spend by team and service, portfolio holdings by sector, disk usage, budgets and any two-level breakdown with more items than a pie chart can hold.
Treemaps compare sizes well but not tiny differences; for exact ranking, add a sorted bar chart next to it.
Installation
Add the Treemap Chart component to your project with the shadcn CLI. It lands in components/treemap-chart.tsx as plain React + Tailwind CSS source you own and can edit.
npx shadcn@latest add @reactframe/treemap-chartOr copy the source by hand and install its dependencies:
npm install clsx tailwind-mergeProps
<TreemapChart /> accepts 9 props, all optional. It also accepts the usual <div> attributes, like className, style, id and aria-*, and passes them to its root element.
| Prop | Type | Default |
|---|---|---|
| theme | "dark" | "light" | "dark" |
| title | string | "Revenue by region and product" |
| subtitle | string | "Trailing 12 months, tiles coloured by year-over-year growth" |
| groups | { label: string; children: TreemapLeaf[] }[] | DEFAULT_GROUPS |
| colorBy How tiles are coloured: by `change` (diverging) or by group. | "change" | "group" | "change" |
| changeRange The change that maps to full colour, in the same units as `change`. | number | 30 |
| height Height of the treemap, in px. | number | 380 |
| formatValue | (value: number) => string | (v) => `$${compact.format(v * 1000)}` |
| formatChange | (value: number) => string | (v) => `${v > 0 ? "+" : ""}${v.toFixed(1)}%` |
- theme"dark" | "light"Default: "dark"
- titlestringDefault: "Revenue by region and product"
- subtitlestringDefault: "Trailing 12 months, tiles coloured by year-over-year growth"
- groups{ label: string; children: TreemapLeaf[] }[]Default: DEFAULT_GROUPS
- colorBy
How tiles are coloured: by `change` (diverging) or by group.
"change" | "group"Default: "change" - changeRange
The change that maps to full colour, in the same units as `change`.
numberDefault: 30 - height
Height of the treemap, in px.
numberDefault: 380 - formatValue(value: number) => stringDefault: (v) => `$${compact.format(v * 1000)}`
- formatChange(value: number) => stringDefault: (v) => `${v > 0 ? "+" : ""}${v.toFixed(1)}%`
npm dependencies
Installed for you by the shadcn CLI.
Treemap Chart FAQ
- What shape does the data take?
- groups is { label, children }[], and each child is { label, value, change? }. Values must be positive; change is optional and only used when colorBy is "change".
- How are tiles coloured?
- colorBy="change" blends from neutral grey toward green for positive and red for negative change, reaching full colour at ±changeRange. colorBy="group" gives each group its own colour instead.
- How does zooming work?
- Click a group's header or any of its tiles to fill the chart with that group; the breadcrumb or Escape goes back. Tiles animate between the two layouts.
- Is it accessible?
- The chart is focusable with a text summary of every group and item; arrow keys move between tiles, Enter zooms in and Escape steps back. With reduced motion layouts switch instantly.
