Charts
TreemapChart
Part of a whole, when the whole has too many parts for a pie — and the parts nest.
When to reach for it
Fifty items where a pie fails at six. Under a dozen items with a ranking to read, a BarChart’s length is the more precise encoding.
Examples
default
| path | Value |
|---|---|
| recharts | 480 |
| react-dom | 310 |
| motion | 140 |
| lucide-react | 96 |
| cmdk | 62 |
| tailwind-merge | 41 |
| clsx | 12 |
| sonner | 28 |
nested
| path | Value |
|---|---|
| runtime › react-dom | 310 |
| runtime › react | 92 |
| charts › recharts | 480 |
| charts › motion | 140 |
| ui › lucide-react | 96 |
| ui › cmdk | 62 |
| ui › sonner | 28 |
| ui › clsx | 12 |
Notes
Part of a whole, when the whole has too many parts for a pie — and the parts nest.
A treemap encodes value as AREA, which the eye reads worse than length but far better than angle, and it is the only form here that stays readable at fifty items. Two rules make it honest: no negative values (an area cannot be negative), and the tiles have to sum to something a reader recognises as the whole.
Reach for <BarChart> when there are under a dozen items and the ranking matters — a bar's length is the more precise encoding, and a treemap's layout deliberately does not order its tiles by value alone.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| datarequired | TreemapNode[] | The tree. One level is a flat set of tiles; two is a nested treemap. | |
| titlerequired | string | What the chart shows, in a sentence a reader could act on. Required, and announced to a screen reader even when it is not printed. | |
| aspectRatio | number | 4 / 3 | How square the tiles are pushed to be. Recharts' own squarify parameter. |
| chartProps | TreemapExtras | — | |
| children | ReactNode | The hover panel. | |
| className | string | Merged onto the figure, last, so a call site can size or space it. | |
| config | ChartConfig | {} | Tile names → their label and paint. Optional: the ramp covers unnamed tiles. |
| dataKey | string | 'size' | The leaf field holding each tile's number. |
| description | ReactNode | A line under the title — the unit, the window, the caveat. | |
| hideDataTable | boolean | false | Drops the hidden table view. Only correct when the page prints the data itself. |
| showLabels | boolean | true | Prints each tile's name on it, where the tile is big enough to hold it. |
| showTitle | boolean | Prints the title above the plot instead of hiding it from sight. | |
| variant | TreemapVariant | 'ramp' | — |
Types
export type TreemapVariant = 'ramp' | 'nested'
export type TreemapExtras = Omit<ComponentProps<typeof RechartsTreemap>, 'data' | 'dataKey'>Accessibility
- title is required. The table view lists the LEAVES with the path that names them: a nested tree read row by row is not something anyone can follow.
- Area is the encoding, so the data must be non-negative and must sum to something the reader recognises as the whole.
- The gap between tiles is a surface-coloured stroke rather than a smaller rect — a treemap whose parts do not touch stops reading as a partition.