Component
TreemapChart
Nested sizes as rectangles; click a group to zoom into it.
import { TreemapChart } from '@loidolt/theme-charts';
Example
Treemap of 3 groups totalling 1,130. Largest: Sheet stock 720, Finished parts 210 and Offcuts 200.
| Item | Value |
|---|---|
| Sheet stock | 720 |
| Sheet stock › Birch ply | 420 |
| Sheet stock › Cork | 180 |
| Sheet stock › Acrylic | 120 |
| Offcuts | 200 |
| Offcuts › Reusable | 140 |
| Offcuts › Scrap | 60 |
| Finished parts | 210 |
Notes
- The data table lists every node by its path ("Sheet stock › Cork").
Props
Generated from the component source, so it cannot drift from the implementation.
| Prop | Type | Default | Notes |
|---|---|---|---|
data required | TreeNode[] | — | A tree of named values; a branch is the sum of its children. |
tableLabels | { pathLabel?: string; valueLabel?: string } | {} | Headings of the data table columns. |
Plus the attributes of Omit<ComponentProps<typeof Chart>, 'option' | 'table' | 'extensions'>andTreemapOptions, forwarded to the root element.