Treemap

Chart
Squarified value tiles: each datum becomes a ramp-colored rectangle whose area is proportional to its value, packed largest-first with near-square aspect ratios, with the label and formatted value rendered inside only when the tile fits them.
src/charts/treemap
View in Charts

Playground

Every control sets a real prop of TreemapProps. The JSX below updates as you go.
Storage by service
Props
compact
boolean
JSX · TreemapProps
<Treemap />

Variants

2 examples from src/charts/treemap/treemap.md, each rendered live from its own JSX.
Compact
<Treemap
compact
data={[
{ label: "Chrome", value: 61 },
{ label: "Safari", value: 24 },
{ label: "Edge", value: 8 },
{ label: "Firefox", value: 5 },
{ label: "Other", value: 2 }
]}
/>
Inspected
<Treemap
defaultSelected={0}
data={[
{ label: "Platform", value: 4200 },
{ label: "Add-ons", value: 1400 },
{ label: "Services", value: 900 },
{ label: "Training", value: 300 }
]}
/>

Anatomy

Storage by service
1
Chart frame
2
Tile
3
Label
4
Value
Dimmed parts appear only in some states or variants.

Props

12 props on TreemapProps, grouped as they are declared in source. Required props are marked *.
Prop
Type
Default
Description
Props
2 props
data *
TreemapDatum[]
–
The tiles, laid out largest first by the squarified algorithm.
title
string
–
Optional heading shown above the tiles.
Density
10 props
compact
boolean
false
partitioned
boolean
false
Slice successive values along alternating axes, keeping the data order.
outlined
boolean
false
Show pale series washes with colored outlines and large readable values.
plain
boolean
false
Strip the card surface for nesting inside an existing card (mirrors Stats).
formatValue
(v: number) => string
–
Formats tile values and the flag (data formatting, not styling).
selected
number | null
–
Press-to-inspect: the selected tile index (controlled). Pass null for none.
defaultSelected
number
–
Press-to-inspect: the initially selected tile (uncontrolled).
onSelect
(index: number | null) => void
–
Fired when a press selects a tile (or clears it with null).
testID
string
–
E2E hook forwarded to the root element.
style
LayoutStyle
–
Composition within a parent only, never a restyle hook and never a width: the parent layout container provides the bounds.

Accessibility and keyboard

Keyboard
Tab
Focuses the plot
ArrowLeft
ArrowRight
Steps through points when inspectable
Escape
Clears the inspected point
Semantics
Roles
group
image
img
ARIA on web
aria-label
From the docs
Flat one-level data; nesting and drill-down are deferred scope. Press a tile to flag its value and share (the others dim); the accessible name carries every tile with its share regardless of which labels fit.

Platform skins

The playground's props on each platform: same tree, native shapes, type and touch sizes.
Web
control 10 · field 10 · card 16 · Instrument Sans
iOS
capsule controls · field 8 · card 12 · SF Pro · 44 pt
Android
Material 3 stadium · field 4 · card 12 · Roboto · 48 dp

Usage

<Treemap
title="Storage by service"
data={[
{ label: "Media", value: 620 },
{ label: "Backups", value: 340 },
{ label: "Logs", value: 180 },
{ label: "Search index", value: 120 },
{ label: "Thumbnails", value: 90 },
{ label: "Exports", value: 45 },
{ label: "Other", value: 25 }
]}
/>
Flat one-level data; nesting and drill-down are deferred scope. Press a tile to flag its value and share (the others dim); the accessible name carries every tile with its share regardless of which labels fit.

Tokens

Read from the playground render. Values follow the scheme and the ion hue.
--c1
--c2
--c3
--c4
--c5
--c6
--c7
--fd
--fm
--ft
--ln
--sf
--sh-sm
--tx3

Related components