Heatmap - Graphy SDK

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: {
    /* ... */
  },
};

Appearance - Customize color palette
Data labels - Display cell values