Treemap

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.
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.
Storage by service
iOS
Storage by service
Android
Storage by service
Web
tsx
<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 }
]}
/>

Props

Prop
Description
data
required
TreemapDatum[]
The tiles, laid out largest first by the squarified algorithm.
title
string
Optional heading shown above the tiles.
compact
boolean
Density (omit for the default 240 plot height; compact is 160).
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.

Do & Don’t

Treemap

Don’t
A handful of near-equal shares reads better as a PieChart or a BarList; near-equal tiles defeat the area encoding.
Do
Storage by service
Reserve the treemap for part-of-whole data with real size contrast, where area comparison earns the space.
← StackedBar
UptimeBar →