Treemap Charts

Treemap charts display hierarchical data as nested rectangles. Each branch of the tree is given a rectangle, which is then tiled with smaller rectangles representing sub-branches.

Registration

Add to .vitepress/theme/index.ts:

import DefaultTheme from 'vitepress/theme'

export default {
  extends: DefaultTheme,
  async enhanceApp({ app }) {
    if (typeof window !== 'undefined') {
      const { Chart, registerables } = await import('chart.js')
      Chart.register(...registerables)
      
      const treemap = await import('chartjs-chart-treemap')
      Chart.register(treemap.TreemapController, treemap.TreemapElement)
    }
  }
}

Installation

npm install chartjs-chart-treemap

Basic Treemap

Loading chart...

Code:

```chart
type: treemap
data:
  datasets:
    - label: Basic Treemap
      tree: [15, 6, 6, 5, 4, 3, 2, 2]
      borderColor: rgba(54, 162, 235, 1)
      borderWidth: 1
      spacing: 1
      backgroundColor: rgba(54, 162, 235, 0.5)
options:
  plugins:
    title:
      display: true
      text: Basic Treemap
    legend:
      display: false
```

---

Grouped Data

Loading chart...

Code:

```chart
type: treemap
data:
  datasets:
    - label: Sales by Category
      tree:
        - { category: Electronics, product: Phone, value: 150 }
        - { category: Electronics, product: Laptop, value: 200 }
        - { category: Clothing, product: Shirts, value: 80 }
        - { category: Food, product: Fruits, value: 40 }
      key: value
      groups:
        - category
      borderColor: white
      borderWidth: 2
      spacing: 2
      captions:
        display: true
options:
  plugins:
    legend:
      display: false
```

---

Multi-level Hierarchy

Loading chart...

Code:

```chart
type: treemap
data:
  datasets:
    - label: Organization
      tree:
        - { dept: Engineering, team: Frontend, member: Alice, hours: 40 }
        - { dept: Engineering, team: Backend, member: Carol, hours: 45 }
        - { dept: Marketing, team: Digital, member: Frank, hours: 30 }
      key: hours
      groups:
        - dept
        - team
      captions:
        display: true
      dividers:
        display: true
        lineColor: rgba(0, 0, 0, 0.5)
```

---

With Labels

Loading chart...

Code:

```chart
type: treemap
data:
  datasets:
    - label: File Sizes
      tree:
        - { name: node_modules, size: 500 }
        - { name: src, size: 150 }
        - { name: dist, size: 100 }
      key: size
      labels:
        display: true
        color: black
        align: center
        position: middle
        overflow: fit
```

---

Styled Rectangles

Loading chart...

Code:

```chart
type: treemap
data:
  datasets:
    - label: Budget
      tree: [300, 250, 200, 150, 100, 80, 60, 40]
      borderColor: rgba(255, 99, 132, 1)
      borderWidth: 2
      borderRadius: 8
      spacing: 3
      backgroundColor: rgba(255, 99, 132, 0.4)
```

---

Configuration Reference

Tree Data Formats

Simple array of numbers:

tree: [15, 6, 6, 5, 4, 3, 2, 2]

Array of objects with grouping:

tree:
  - { category: A, value: 100 }
  - { category: B, value: 80 }
key: value
groups:
  - category

Dataset Options

Option	Description
tree	Tree data (array of numbers or objects)
key	Property name for values in object data
groups	Array of property names for hierarchy levels
backgroundColor	Rectangle fill color
borderColor	Rectangle border color
borderWidth	Border width in pixels
borderRadius	Corner radius in pixels
spacing	Space between rectangles

Labels

labels:
  display: true
  color: black
  align: center        # left, center, right
  position: middle     # top, middle, bottom
  overflow: cut        # cut, hidden, fit

Captions (for groups)

captions:
  display: true
  color: white
  align: left
  padding: 3

Dividers (between groups)

dividers:
  display: true
  lineColor: black
  lineWidth: 1
  lineDash: [5, 5]

---

Resources

• chartjs-chart-treemap Documentation
• GitHub Repository