Treemap

A React component in Beamline's Charts & data-vis category.

Nested rectangles sized by value (spend by team, then service), squarified so tiles stay close to square: labels that fit or hide, hover and focus highlight, drill in with a click or Enter and out with Escape, Backspace or the breadcrumb, hatched chips for parts that were not measured, and a table of the current level.

Use it for

Part-to-whole over a hierarchy with drill-down: cloud spend by team and service, storage by folder, revenue by region and account.

Not for

Markets coloured by change (market-heatmap).
A few flat shares (pie-chart).
Flows between stages (sankey-chart).

Anatomy

title, description, breadcrumb (the way back up), table button
tiles (buttons): the current level's children
group header and nested tiles one level down (depth 2)
tile label and value (shown only when they fit)
readout (the hovered or focused tile's path, value and share)
unmeasured chips (hatched) under the plot

Variants

0: depth: 1 (the current level only) · 2 (each tile shows its own children)
1: level (controlled or not)

States

loading (skeleton)
empty
unmeasured parts (value null): left out of the area, listed as hatched chips that read “Not measured”
hovered / focused tile (ring, others dim)
drilled in (breadcrumb shows the path)
a tile with unmeasured parts inside carries a small hatched mark; the readout counts them
table view (the current level: value and share)
right-to-left: tiles mirror (largest at the start edge)

Keyboard

Tab focuses one tile; arrow keys move to the nearest tile in that direction (mirrored in right-to-left)
Enter or Space drills into a tile with children (or calls onSelect on a leaf)
Escape or Backspace goes up one level and refocuses the tile you came from; at the top Escape is left to the page
Breadcrumb items go straight to any level above

Motion

Tiles fade in once; drilling zooms the new level out of the chosen tile (one motion-out); instant under reduced motion.

Props

Prop	Type	Default	Description
`data`	`TreemapNode`	—	The root: { key, label, value?: number \| null, children? }. A parent's value is the sum of its measured children.
`format`	`(value: number) => string`	—	How values read: "$42.0k".
`level / defaultLevel / onLevelChange`	`string`	—	Key of the node whose children fill the view. Default the root.
`depth`	`1 \| 2`	—	Levels shown at once. Default 2.
`height`	`number`	—	Plot height. Default 320.
`onSelect`	`(node: TreemapNode, path: TreemapNode[]) => void`	—	A leaf was chosen (click or Enter).
`title / hideTitle / description`	`string / boolean / ReactNode`	—	The figure's name (a heading unless hidden) is always its accessible name.
`table`	`boolean`	—	Offer “View as table”. Default true.
`loading`	`boolean`	—	Skeleton of the chart's shape; keeps the frame's size.
`actions`	`ReactNode`	—	Controls beside the legend (range, offset).
`className`	`string`	—	Lands on the figure.
`classNames`	`ChartClassNames`	—	Frame, tooltip and slice-list parts as applicable to this chart.
`style / ref`	`CSSProperties / Ref<HTMLElement>`	—	The native chart figure; layout measurement refs stay internal.

Dependencies

motion

Import

import { Treemap } from "@/components/treemap/treemap";

Get it

Treemap is part of Beamline: 190 React components and screens your coding agent (Claude Code, Codex, Cursor or any MCP client) installs into your app through Beamline's MCP server, as a ready-built package or as plain React source you can change. $49 one payment (regular $200), no subscription, a year of updates, one licence for your whole team. Get Beamline · Connect your agent