Examples · Heat map

Heat map examples

A heat map chart keeps the grid of a table — rows, columns, one number per cell — and shades each cell by its value, so the hot spots surface before you read a single figure. This is the data kind of heat map: a heat map table of numbers, not the click-tracking overlays web analytics tools sell under the same name.

When to use it

  • Two dimensions at once — team × weekday, hour × server, plan × feature — where the pattern is the point
  • Finding hot spots and quiet corners in a grid too big to read number by number
  • Keeping the exact values available: every cell still prints its figure and reads aloud on hover

Not the right shape?

Precise value comparison between two specific cells — human eyes rank tone poorly. If the exact ranking matters more than the pattern, keep the numbers in a live table or chart one column as bars.

Real-world examples

A pinned scale for load numbers

By default the tone runs from the grid's own minimum to its maximum. options.scale pins it — here 0 to 100 — so half load reads as half tone even when no server actually hit the ends.

Open in maker with this data

View the spec 
{
  "type": "heatmap",
  "theme": "ink",
  "title": "CPU load by hour (%)",
  "source": "Infrastructure dashboard, yesterday",
  "options": {
    "scale": {
      "min": 0,
      "max": 100
    }
  },
  "data": {
    "labels": [
      "00:00",
      "04:00",
      "08:00",
      "12:00",
      "16:00",
      "20:00"
    ],
    "series": [
      {
        "name": "API",
        "values": [
          22,
          18,
          54,
          78,
          82,
          45
        ]
      },
      {
        "name": "Workers",
        "values": [
          35,
          41,
          60,
          71,
          66,
          38
        ]
      },
      {
        "name": "DB",
        "values": [
          28,
          25,
          49,
          88,
          91,
          52
        ]
      }
    ]
  }
}

Honest gaps stay quiet

A missing reading is null, not zero: the cell stays flat, prints nothing, and the tooltip says "No data". Faking a cold cell would invent a fact the data never held.

View the spec 
{
  "type": "heatmap",
  "theme": "mint",
  "title": "Feature sessions by plan",
  "source": "Product analytics, last month",
  "data": {
    "labels": [
      "Editor",
      "Export",
      "API",
      "Share"
    ],
    "series": [
      {
        "name": "Free",
        "values": [
          840,
          210,
          null,
          380
        ]
      },
      {
        "name": "Pro",
        "values": [
          960,
          540,
          220,
          410
        ]
      },
      {
        "name": "Team",
        "values": [
          720,
          610,
          480,
          350
        ]
      }
    ]
  }
}
Open this chart in a maker Chart maker from scratch

Questions people ask

What is a heat map chart?

A grid of numbers where each cell's background tone encodes its value — darker means more, on a five-step scale shown beside the chart. It's the fastest way to scan a two-dimensional table for structure: streaks, hot spots, dead zones.

Heat map or status matrix?

Same grid, different cells. A heat map's cells hold numbers, so tone can carry magnitude. A status matrix's cells hold verdicts — yes, no, partly — drawn as shapes. If you catch yourself binning numbers into 'high, medium, low' to fit a matrix, you wanted the heat map.

How is the color scale chosen?

From the data: the smallest value maps to the faintest tone, the largest to the strongest, in five steps. When the natural range matters more than the observed one — percentages, scores out of 100 — options.scale pins min and max explicitly.