A squarified treemap of groups and leaves, colored on a diverging scale by month-over-month change. Clicking a group zooms it to fill the frame as the other tiles fly out, with a breadcrumb and Escape to zoom back.
npx shadcn@latest add https://hyperblur.dev/r/chart-treemap.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/chart-treemap.tsx.
import { ChartTreemap } from "@/components/hyperblur/chart-treemap"
<ChartTreemap colorBy="change" height={300} onZoom={(group) => console.log(group)} />| Prop | Type | Default | Description |
|---|---|---|---|
| data | { name: string; children: { name: string; value: number; change?: number }[] }[] | Cloud spend in 5 groups | Groups with their leaves. change is a percentage used for color and the tooltip. |
| height | number | 260 | Plot height in pixels. The width follows the container. |
| title | string | "Cloud spend by service, October" | Accessible title of the chart. |
| summary | string | Accessible description. Built from group totals when omitted. | |
| format | (value: number) => string | Value formatter. Defaults to compact dollars. | |
| rootLabel | string | "All services" | First breadcrumb label. |
| colorBy | "change" | "group" | "change" | Color tiles by change on a diverging scale, or by group with the palette. |
| increaseColor | string | "#ff6b5b" | Color for positive change. |
| decreaseColor | string | "#22c3a6" | Color for negative change. |
| palette | string[] | 6 colors | Group colors when colorBy is group. |
| onZoom | (group: string | null) => void | Called when a group is zoomed in, and with null when zooming out. | |
| onSelect | (leaf: TreemapLeaf & { group: string }) => void | Called when a leaf is clicked while its group is zoomed. |