Skip to main content
Heatmaps display data as a grid of colored cells where color intensity represents values, making patterns and correlations easy to spot.

​
When to use

  • Patterns across two dimensions - Show relationships between two categorical variables
  • Correlation matrices - Display strength of relationships
  • Time-based patterns - Reveal trends across days, weeks or months
  • Large datasets - Summarise many data points visually

​
Basic example

const config: GraphConfig = {
  type: 'heatmap',
  data: {
    columns: [
      { key: 'day', label: 'Day' },
      { key: 'hour_0', label: '00:00' },
      { key: 'hour_6', label: '06:00' },
      { key: 'hour_12', label: '12:00' },
      { key: 'hour_18', label: '18:00' }
    ],
    rows: [
      { day: 'Monday', hour_0: 45, hour_6: 120, hour_12: 350, hour_18: 280 },
      { day: 'Tuesday', hour_0: 52, hour_6: 135, hour_12: 380, hour_18: 295 },
      { day: 'Wednesday', hour_0: 48, hour_6: 140, hour_12: 420, hour_18: 310 },
      { day: 'Thursday', hour_0: 55, hour_6: 145, hour_12: 390, hour_18: 285 },
      { day: 'Friday', hour_0: 60, hour_6: 150, hour_12: 450, hour_18: 380 }
    ]
  }
};

​
Data structure

Heatmaps require:
  • First column: Row labels (categorical)
  • Remaining columns: Numeric values for each cell
Each data column becomes a column in the heatmap grid.

​
Data labels

Show values in each cell: 
const config: GraphConfig = {
  type: 'heatmap',
  dataLabels: {
    showDataLabels: true
  },
  data: { /* ... */ }
};