Components

TreeMap Chart

See how the parts fit together. Compare proportions, keep groups in context, and open a branch to explore what is inside.

Install

npx mario-charts@latest add treemap-chart

Playground

Explore the same values with three layouts and two hierarchy views.

LayoutViewDatasetStatePaletteOrderVisible levels · 2Gap · 3px

CornersValuesPercentagesExplore groupsAnimation

Waiting for chart space

1.0K total

Select a group to explore it. View data includes small and zero-valued observations.

Arrow keys inspect tiles; Enter opens groups. Backspace returns to the parent. Zero values never occupy painted area.

Usage

tsx

import { TreeMapChart } from "@/components/charts/treemap-chart";

const revenue = [
  { name: "Software", children: [
    { name: "Desktop", value: 300 },
    { name: "Mobile", value: 200 },
    { name: "API", value: 100 },
  ] },
  { name: "Hardware", children: [
    { name: "Devices", value: 150 },
    { name: "Accessories", value: 100 },
  ] },
];

export function RevenueComposition() {
  return <TreeMapChart data={revenue} layout="squarified"
    variant="nested" height={400} ariaLabel="Revenue composition" />;
}

Choosing a layout

Squarified

Balanced blocks help compare areas and leave room for labels.

Binary

Repeated balanced splits create a more structured subdivision.

Slice and dice

Alternating strips reveal levels and preserve ordering, with narrower tiles.

Nested mode allocates area to groups first, then reserves headers and padding for their children. Compare siblings within a group. For direct area comparison across all leaves, choose Flat and set gap and corners to zero.

Reading the hierarchy

Software totals 600 from its three children. Desktop is 300: 30% of the full 1,000 and 50% of Software. Opening Software changes the available area, while the global percentage stays at 30%; inspection also shows its 50% share of the current view.

Group colors stay attached to their original top-level branch when tiles move or you explore a group. Repeated names remain separate observations through their numeric index paths. A refreshed data array resets navigation to the root.

Missing values are errors; explicit zero values remain in View data. Empty groups are valid zero observations. Custom tooltip percentages are nullable for a zero total. The callback still receives the original node and full name path; inspection now also provides node, indexPath, depth and local percentages.

API Reference

Prop	Type	Default	Description
`data`Required	readonly TreeMapNode[]	—	Nodes have name, leaf value, optional children and CSS color. Groups sum their children, ignoring a supplied parent value. Empty children arrays without a value are valid zero groups. Other missing, negative or nonfinite leaf values are errors.
`layout`	'squarified' \| 'binary' \| 'slice-dice'	'squarified'	Squarified favors balanced rectangles. Binary makes balanced splits along the longer side. Slice-and-dice alternates direction at each level.
`variant`	'nested' \| 'flat'	'nested'	Nested reserves group headers and insets. Flat places all leaves in the current view on one shared area scale and preserves their group colors and full paths.
`sort`	'value' \| 'input'	'value'	Order tiles by descending value or preserve sibling input order. Original node identity and index paths remain unchanged.
`maxDepth`	number	2	Show 1–6 levels at once. Groups too small for a header collapse into one tile. Open a group to explore its children.
`drillDown`	boolean	true	Select a group to explore it. Breadcrumbs return to ancestors; Backspace returns from the chart. Fresh data arrays reset the view to the root.
`gap / borderRadius`	number	3 / 4	Spacing and corner radius, each 0–24px. Insets are capped relative to tile size. Set both to 0 for rectangular area comparison without gutters.
`colors`	readonly string[]	—	Palette assigned by original top-level order and inherited by descendants. A node's color overrides its branch. CSS variables, named colors and transparency are supported; label ink adapts to the resolved paint.
`showValues / showPercentages`	boolean	true / false	Display values and percent of the full hierarchy when a tile has room. Small tiles never gain artificial area to fit text; full information stays in inspection and View data.
`valueFormatter`	(value: number) => string	—	Format counts in labels, inspection, totals and the accessible data table.
`height / className`	number / string	400	Stable frame height (at least 120px) and root styling. Breadcrumbs and data controls are included in this height.
`animation`	boolean	true	Tiles grow around their centers with constant opacity. Hover and resize do not replay entrance. Reduced motion and keyboard focus finish immediately.
`loading / error`	boolean / string \| null	—	Refreshing keeps the current geometry. Initial loading uses grouped placeholder tiles. Empty, zero and error states retain the same root.
`onClick`	(node: TreeMapNode, path: readonly string[]) => void	—	The original selected node and its full name path, including groups and zero values selected from View data. Works with pointer, touch and keyboard.
`tooltipRenderer`	(data: TreemapChartTooltipData<TreeMapNode>) => ReactNode	—	Original node, name/index paths, depth, value, color and formatted value. percentage is relative to the full hierarchy; parentPercentage and viewPercentage expose local shares. Zero denominators return null.
`ariaLabel / description`	string	—	Accessible chart name and optional explanation of your data.