synthetic
Treemap
Rectangles sized by value, one level of grouping.
Budget by areaFive projects grouped by area
In context
Finance overviewWhere the studio's budget sits
Budget, Q4
£158,450 across five projects. Product is the largest area.
Props
| Prop | Type | Required | Default |
|---|---|---|---|
data | TreemapNode[] | Yes | — |
title | string | undefined | No | — |
ariaLabel | string | undefined | No | — |
width | number | undefined | No | 480 |
height | number | undefined | No | 320 |
bionic | boolean | undefined | No | — |
bionicOptions | BionicOptions | undefined | No | — |
Layout
Slice-and-dice: top level splits horizontally, children vertically, area proportional to value. Nesting stops at one level.
data-rebar-* attributes
data-rebar-component="treemap" on the root <figure>.
Migrating to Ant Design
Not codemod-covered. AntD ships no chart components (it recommends @ant-design/charts); there is no 1:1 mapping for a treemap.