vue-charts Treemap
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 colors palette.
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.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
data | Array | required | Hierarchical data with optional children arrays |
data-key | row path or accessor | 'value' | Field with the numeric value |
name-key | row path or accessor | 'name' | Field with the node label |
width / height / aspect | number | fills the parent | Size. See chart size |
initial-dimension | { width, height } | { width: 640, height: 360 } | Size before the first measurement. See chart size |
title | string | 'Treemap' | Accessible name of the chart |
desc | string | — | Accessible description of the chart |
tile-aspect-ratio | number | 4 / 3 | Target rectangle aspect ratio of the squarify layout |
type | 'flat' | 'nest' | 'flat' | flat shows all leaves; nest enables drill-down |
fill | string | series 1 token | Fill when colors is not set |
stroke | string | 'var(--v-charts-background, #fff)' | Rectangle border color |
colors | string[] | numbered series tokens | Palette, one color per top-level group |
is-animation-active | boolean | true | Animate entrance and data changes |
transition | ChartTransition | motion tokens | Timing and easing of data changes |
Events
| Event | Payload | Description |
|---|---|---|
@node-click | (node, index, event: MouseEvent | KeyboardEvent) | A node is clicked, or Enter is pressed on the focused node |
@node-mouseenter, @node-mouseleave | (node, index, event: MouseEvent) | The pointer enters or leaves a node; the tooltip follows |
@animation-start, @animation-end | () | An animation starts or ends |
node is a TreemapLayoutNode (an exported type). The chart pointer events (@click,
@mousemove, …) are also available. See Events and v-model.
Slots
| Slot | Props | Description |
|---|---|---|
#content | { x, y, width, height, depth, name, value, payload, color, root, entryIndex, index, fill, stroke } | Replace a node rectangle and its label |
| 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.