Charts
Treemap
Visualize hierarchical data as nested rectangles
Treemap displays hierarchical data as nested rectangles where the area of each rectangle is proportional to its value.
Simple Treemap
A basic treemap with nested data groups. Each group gets a distinct color from the colorPanel.
Custom Content
Use the #content slot to fully customize how each node is rendered. The slot receives coordinates, dimensions, name, value, and fill color.
Nest Mode
Set type="nest" for interactive drill-down. Click a group to zoom into its children. A breadcrumb trail appears for navigating back.
Treemap props
| Prop | Type | Default | Description |
|---|---|---|---|
data | Array | required | Hierarchical data with optional children arrays |
dataKey | string | 'value' | Property name for numeric values |
nameKey | string | 'name' | Property name for node labels |
width | number | required | Chart width in pixels |
height | number | required | Chart height in pixels |
aspectRatio | number | 4/3 | Target rectangle aspect ratio for squarify layout |
type | 'flat' | 'nest' | 'flat' | flat shows all leaves; nest enables drill-down |
fill | string | '#808080' | Default fill color |
stroke | string | '#fff' | Rectangle border color |
colorPanel | string[] | 8-color default | Color palette assigned by top-level group |
isAnimationActive | boolean | true | Enable entrance animation |
transition | AnimationOptions | { duration: 0.8, ease: 'easeOut' } | Animation timing (motion-v) |
onClick | (node, event) => void | — | Click event handler |
onMouseEnter | (node, event) => void | — | Mouse enter handler; activates tooltip at node center |
onMouseLeave | (node, event) => void | — | Mouse leave handler; clears tooltip hover state |
Slots
| Slot | Props | Description |
|---|---|---|
#content | TreemapContentSlotProps | Custom node rendering. Receives { x, y, width, height, depth, name, value, index, fill, stroke, payload, root, color }. |
default | — | Place <Tooltip> or other child components here. |
Data structure
const data = [
{
name: 'Group A',
children: [
{ name: 'Item 1', value: 100 },
{ name: 'Item 2', value: 200 },
],
},
{
name: 'Group B',
children: [
{ name: 'Item 3', value: 300 },
],
},
]
Leaf nodes must have a numeric value (or whatever dataKey specifies). Parent nodes derive their value by summing all descendants.