Rectangles sized by value, to compare parts of a whole at a glance. Use it when there are many parts and a pie would be unreadable, such as disk usage or sales by product.
Charts need Recharts. Install it once with
yarn add recharts, then import from@bolio-ui/core/charts. The package stays out of your bundle until you use a chart.
Each item has a name and a value. The area of its rectangle follows the value.
An item with children is a group. Its children take its color unless they set their own.
| Attribute | Description | Type | Accepted values | Default |
|---|---|---|---|---|
| data | the items, each one may have children | TreemapNode[] | TreemapNode | - |
| height | height of the chart, in pixels | number | - | 300 |
| aspectRatio | the shape the rectangles try to have, width over height | number | - | golden ratio |
| withTooltip | show the value of a rectangle on hover and focus | boolean | - | true |
| withLabels | write the name inside the rectangles that are big enough | boolean | - | true |
| labelColor | color of the names | string | - | #fff |
| valueFormatter | how a number is written | (value: number) => string | - | thousands separators, en-US |
| ... | native props, passed to the root | HTMLAttributes | 'aria-label', 'className', ... | - |
type TreemapNode = {
name: string
value?: number // a leaf needs a value, a group is the sum of its children
color?: string // any CSS color, a group passes it to its children
children?: TreemapNode[]
}
The ref points at the root div.
Name the chart with aria-label, or with aria-labelledby pointing at a heading. A named chart becomes a group. Names show only inside rectangles that have room, so list the biggest items in text next to the chart or offer a Table.