Matrix Charts

Matrix charts display data in a grid format, perfect for heatmaps, correlation matrices, and calendar views.

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 matrix = await import('chartjs-chart-matrix')
      Chart.register(matrix.MatrixController, matrix.MatrixElement)
    }
  }
}

Installation

npm install chartjs-chart-matrix

Basic Matrix

Loading chart...

Code:

```chart
type: matrix
data:
  datasets:
    - label: Basic Matrix
      data:
        - { x: 1, y: 1, v: 10 }
        - { x: 1, y: 2, v: 20 }
        - { x: 2, y: 1, v: 40 }
        - { x: 2, y: 2, v: 50 }
      backgroundColor: rgba(54, 162, 235, 0.5)
      borderColor: rgba(54, 162, 235, 1)
      borderWidth: 1
      width: 50
      height: 50
options:
  scales:
    x:
      type: linear
      min: 0.5
      max: 3.5
    y:
      type: linear
      min: 0.5
      max: 3.5
```

---

Heatmap Style

Loading chart...

Code:

```chart
type: matrix
data:
  datasets:
    - label: Heatmap
      data:
        - { x: 1, y: 1, v: 15 }
        - { x: 1, y: 2, v: 25 }
        - { x: 2, y: 1, v: 45 }
        - { x: 2, y: 2, v: 55 }
        # ... more cells
      borderWidth: 1
      width: 60
      height: 60
options:
  scales:
    x:
      type: linear
      min: 0.5
      max: 4.5
    y:
      type: linear
      min: 0.5
      max: 4.5
```

---

Correlation Matrix

Invalid Chart Configuration:

data.labels: Invalid input: expected array, received object

Code:

```chart
type: matrix
data:
  datasets:
    - label: Correlation
      data:
        - { x: 0, y: 0, v: 1.0 }
        - { x: 0, y: 1, v: 0.8 }
        - { x: 1, y: 0, v: 0.8 }
        - { x: 1, y: 1, v: 1.0 }
        # ... symmetric matrix
      borderWidth: 1
      borderColor: white
      width: 70
      height: 70
options:
  scales:
    x:
      type: linear
      min: -0.5
      max: 3.5
    y:
      type: linear
      min: -0.5
      max: 3.5
```

---

Weekly Activity

Loading chart...

Code:

```chart
type: matrix
data:
  datasets:
    - label: Activity
      data:
        - { x: 0, y: 0, v: 5 }   # Week 0, Day 0 (Mon)
        - { x: 0, y: 1, v: 12 }  # Week 0, Day 1 (Tue)
        # ... more data
      backgroundColor: rgba(75, 192, 192, 0.6)
      borderRadius: 4
      width: 40
      height: 40
options:
  scales:
    x:
      type: linear
      position: top
      title:
        display: true
        text: Week
    y:
      type: linear
      reverse: true
      title:
        display: true
        text: Day
```

---

Configuration Reference

Data Format

Each data point requires x, y coordinates and optionally a value v:

data:
  - { x: 1, y: 1, v: 100 }
  - { x: 1, y: 2, v: 200 }

Cell Sizing

datasets:
  - width: 50        # Cell width in pixels
    height: 50       # Cell height in pixels
    # Or use functions for responsive sizing:
    # width: ({chart}) => chart.chartArea.width / 3

Styling

datasets:
  - backgroundColor: rgba(54, 162, 235, 0.5)
    borderColor: rgba(54, 162, 235, 1)
    borderWidth: 1
    borderRadius: 4   # Rounded corners

Scales

options:
  scales:
    x:
      type: linear
      min: 0.5
      max: 5.5
      offset: false
      ticks:
        stepSize: 1
      grid:
        display: false
    y:
      type: linear
      min: 0.5
      max: 5.5
      reverse: true    # Optional: flip Y axis

---

Resources

• chartjs-chart-matrix Documentation
• GitHub Repository