Data & ChartsPro

Treemap

Treemap for the parts of a hierarchy: squarified, nested with group headers, or as an icicle.

Usage

Treemap comes with WunderUI Core and Pro, in the package from your plan. See the plans.

Then import what you need:

tsx

import {
  TreemapChart,
  TreemapChartProps,
  TreemapChartVariant,
} from "@wunderui/react"

How the component is used inside real screens — the same compositions as the Usage section of the Figma page.

Nested treemap of revenue with the top lines.

Prop	Type	Default
variant	"basic-treemap" \| "nested-treemap" \| "icicle"	"basic-treemap"
data	{ name, value?, color?, children? }	—
valueFormatter	(v: number) => string	—
state	"ready" \| "loading" \| "empty" \| "error"	"ready"
hiddenSeries · animate · animationKey	string[] · boolean · string \| number	—
activeIndex	number \| null	—
animate	boolean	—
animationKey	string \| number	—
className	string	—
defaultActiveIndex	number \| null	—
description	string	—
height	number	—
hiddenSeries	readonly string[]	—
label	string	—
onActiveIndexChange	(index: number \| null) => void	—
onRetry	() => void	—
width	number	—

The CSS variables this component reads. Set one on any wrapper to restyle everything inside it. More in Theming.