Treemap Chart ^0.1.18

Proportional rectangles packed to fill a rectangle. Works great for parts-of-a-whole with many items, hierarchies, and storage/market-cap visualizations.

Basic

<VxTreemapChart
  :data="[
    { name: 'Chrome',  value: 62 },
    { name: 'Safari',  value: 19 },
    { name: 'Edge',    value: 9 },
    { name: 'Firefox', value: 5 },
    { name: 'Other',   value: 5 },
  ]"
/>

Programming languages

<VxTreemapChart :data="languages" showPercents />

Stock market cap

<VxTreemapChart :data="market" />

Hierarchical — file system

Groups render as outlines; leaves fill with color.

<VxTreemapChart
  :data="[
    { name: 'node_modules', children: [
      { name: 'vue',        value: 120 },
      { name: 'vite',       value: 85 },
      ...
    ]},
    { name: 'src', children: [...] },
    { name: 'dist', value: 210 },
  ]"
/>

Hierarchical revenue

<VxTreemapChart :data="revenue" showPercents />

Custom colors per leaf

<VxTreemapChart
  :data="[
    { name: 'Housing',   value: 1200, color: '#6366f1' },
    { name: 'Food',      value: 450,  color: '#22c55e' },
    ...
  ]"
/>

Minimal (no labels)

<VxTreemapChart :data="market" :showLabels="false" />

Compact gap

<VxTreemapChart :data="data" :gap="0" :radius="0" />

Props

Prop	Type	Default	Description
data	TreemapNode[]	[]	Tree of { name, value?, color?, children? }
height	number	360	SVG height
gap	number	2	Gap between tiles
radius	number	4	Tile corner radius
colors	string[]	[]	Palette override
showLabels	boolean	true	Print node names inside
showValues	boolean	true	Show numeric value
showPercents	boolean	false	Show % of total
tooltip	boolean	true	Hover tooltip
animate	boolean	true	Fade in on mount

Events

Event	Payload
hover	{ node, path }
click	{ node, path }