TreeMap
Every example on this page is live, drawn by the library's Storybook, where you can also change its props and see the result.
A chart that shares its area out between items in proportion to their values. Items are sorted by value and laid out by splitting off halves of the total along the longer side, so cells stay close to square. Uses patterns to differentiate cells.
A cell is labelled only where its label fits inside it. With both showLabels and showValues, a cell reads Name (value). Items worth nothing (zero, negative or not a number) take no room and are left out.
The map stretches to fill whatever box it is laid out in, including a widget's stored preview. Its labels keep their size.
Import
import { TreeMap } from "~lib/charts/tree-map";
Props
| Name | Type | Required | Default | Description |
|---|---|---|---|---|
data | { label: string; value: number; pattern?: PatternType }[] | Yes | N/A | Items to display |
showLabels | boolean | No | true | Show each cell's name, where it fits |
showValues | boolean | No | false | Show each cell's value, after its name if shown |
width | number | string | No | 300 | Chart width |
height | number | string | No | 300 | Chart height |
PatternType: "solid" | "diagonal" | "dots" | "crosshatch" — cycles automatically by sort order if not specified.