Treemap

Cloud spend · September

Hover a tile for its value and share

Installation

pnpm dlx shadcn@latest add @paneui/treemap

Usage

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

<Treemap
  label="Spend by category"
  data={[
    { id: "rent", label: "Rent", value: 1800 },
    { id: "food", label: "Food", value: 620 },
  ]}
/>

Examples

Flat

Use when the data has no natural groups.

Custom Colors

Gap, Padding and Radius

Controlled Active Tile

Use when a list outside the chart should highlight the same tile.

Compact

Keyboard

Each tile is focusable. Tab in, then ArrowRight / ArrowDown and ArrowLeft / ArrowUp move between tiles and Home / End jump to the ends. Focus shows the tooltip.

Accessibility

Every tile has an aria-label with its group, value and share, and a visually hidden data table lists all tiles for screen readers. Labels hide on tiles too small to hold them.

API Reference

Squarified treemap with one level of grouping, tooltip and legend. Also accepts every prop of section.

data*: readonly TreemapNode[]; Top-level nodes; nodes with children become groups.
label= "Treemap": string; Accessible name for the chart, legend and data table.
height= 320: number; Chart height in px; width fills the container.
formatValue= formatNumber: (value: number) => string; Formats values in the tooltip, labels and table.
gap= 3: number; Space between tiles in px.
groupPadding= 3: number; Inset of child tiles inside a group, in px.
radius= 10: number; Tile corner radius in px.
showLegend= true: boolean; Show the legend of top-level nodes.
activeId: string | null; Controlled highlighted tile.
defaultActiveId: string | null; Initially highlighted tile.
onActiveChange: (id: string | null) => void; Called on hover, focus and leave.

Prop	Type	Default	Description
data*	readonly TreemapNode[]	—	Top-level nodes; nodes with `children` become groups.
label	string	"Treemap"	Accessible name for the chart, legend and data table.
height	number	320	Chart height in px; width fills the container.
formatValue	(value: number) => string	formatNumber	Formats values in the tooltip, labels and table.
gap	number	3	Space between tiles in px.
groupPadding	number	3	Inset of child tiles inside a group, in px.
radius	number	10	Tile corner radius in px.
showLegend	boolean	true	Show the legend of top-level nodes.
activeId	string \| null	—	Controlled highlighted tile.
defaultActiveId	string \| null	—	Initially highlighted tile.
onActiveChange	(id: string \| null) => void	—	Called on hover, focus and leave.

TreemapNode

One node of data.

id*: string; Stable id.
label*: string; Tile and legend label.
value: number; Leaf value. Ignored when children is given (the group sums them).
children: TreemapNode[]; Child leaves (one level is drawn).
color: string; Overrides the palette colour; groups pass theirs down and shade each child a step darker.
description: string; Extra line in the tooltip.

Prop	Type	Default	Description
id*	string	—	Stable id.
label*	string	—	Tile and legend label.
value	number	—	Leaf value. Ignored when `children` is given (the group sums them).
children	TreemapNode[]	—	Child leaves (one level is drawn).
color	string	—	Overrides the palette colour; groups pass theirs down and shade each child a step darker.
description	string	—	Extra line in the tooltip.

squarify

(values: readonly number[], rect: { x, y, w, h }) => Rect[]. The squarified layout algorithm, exported for custom treemaps.