This entry is part of the Chart Index, the reference library for the Chart Design Field Guide.

The table is the form analysts dismiss as just data, and the form readers reach for first when they want a specific number. A well-designed table is a chart: it makes values comparable, exposes structure, and supports both scanning and reading. Add colour to the cells and the table becomes a heatmap — the same matrix, with magnitude encoded as hue or lightness rather than glyph.

The two forms sit on a continuum. A table answers what was the value?; a heatmap answers where are the high and low regions of this matrix? Most analytical tasks need both, which is why the best tabular displays combine numbers and colour.

What it is

A table arranges values in rows and columns. Each cell holds a number, label, or marker. The structure encodes relationships — row by row (a record) and column by column (a variable) — and the eye reads it as a grid. A heatmap is a table where the cell background is mapped to a colour scale that encodes the cell's value, often with the number retained or omitted depending on the design intent.

The hero chart above is a 4 × 24 grid: regions down, UTC hours across, p95 latency encoded as lightness on a single sequential scale. Even without reading a single value, the eye picks out the diagonal — each region's business-hours peak shifts with its time zone — and the global pre-dawn quiet. Hover a cell for the number; randomise the data and the colour ramp re-stretches to the new extent, which is the first thing to know about the form: the colours mean nothing without the scale beside them. A line chart of four regional series would have buried this pattern under crossing strokes.

When to use it

Tables and heatmaps are the right choice when:

  • The reader needs specific values as well as overall pattern — a table provides both; a chart gives up the values.
  • You have a two-way matrix of categorical or ordinal variables — region × hour, product × cohort, week × day.
  • You have too many cells for any other form — a treemap or bar chart with 200 entries is unreadable; a sparse heatmap with 200 cells is scannable.
  • The data is comparable across rows and columns — same units, same direction-of-good.
  • You want to support both scanning and reading — the heatmap helps the eye find regions of interest; the values let the reader confirm.

When not to use it

  • Comparing magnitudes precisely. A heatmap encodes value as lightness, which is one of the least accurate perceptual channels. For precise comparison, fall back to a bar chart.
  • One-dimensional data. A heatmap of a single variable is just a coloured bar chart. Use bars.
  • Sequential x-axis with a clear trend. A 24-cell heatmap of one day's traffic is harder to read than a line chart of the same data.
  • Categorical comparison with no inherent matrix structure. Revenue by region alone is a bar chart, not a heatmap.

Design principles

Right-align numbers, left-align labels

Numbers are read by comparing digit columns — ones place to ones place. Right-aligning them puts the decimal points and digit columns in a single vertical band. Labels are read left-to-right; left-align them. This is the single highest-impact change to any sloppy table.

Use a monospaced or tabular-figures font for numbers

Proportional digit widths (the default in most fonts) shift values out of column alignment: a 1 is narrower than a 4. Tabular figures fix every digit at the same width. Either use a monospaced font or enable tabular figures (font-feature-settings: 'tnum';). The improvement is dramatic.

Limit decimal places to the precision the reader needs

A revenue table with values like 4,238,617.93 asks the reader to parse seven significant figures when the message is in the first three. Round to the level of precision that matters: 4.24m or 4,239 k. Few: show the resolution you mean to show, not the resolution your tool defaults to.

Quiet the grid

Tufte's principle: minimise non-data ink. Rule lines on every cell create a grid of jail bars. Use a single light rule between rows, no vertical rules, and rely on alignment to read columns. Heavy gridlines obscure the data.

Three table design weights
MAXIMUM GRID — NOISYREGIONQ1Q2Q3Q4North4.24.85.15.6South3.13.42.93.8East5.86.15.46.9West2.93.23.64.1MINIMAL RULES — CLEARREGIONQ1Q2Q3Q4North4.24.85.15.6South3.13.42.93.8East5.86.15.46.9West2.93.23.64.1NO RULES — RELIES ON ALIGNMENTREGIONQ1Q2Q3Q4North4.24.85.15.6South3.13.42.93.8East5.86.15.46.9West2.93.23.64.1
The same data with maximum, minimal, and zero gridlines. The middle form is the most readable.

Use colour as a layer, not the data

In a heatmap, the colour scale should reinforce the structure, not replace the numbers. For ordered data (counts, rates, durations), use a sequential scale that goes from light to dark in one direction. For data with a meaningful midpoint (above/below average, positive/negative change), use a diverging scale: two hues meeting at a neutral centre, so that the sign of every cell is readable before its size. Putting a diverging scale on data with no midpoint invents a boundary that is not there; putting a sequential scale on signed data hides the sign.

Sequential scale: weekly sales by store
Six stores, six weeks, thousands of dollars. One hue, light to dark. The eye finds the busy stores (darker rows) and the strong weeks (darker columns) without reading a number; hover any cell for the value.
Diverging scale: change on the same week last year
The same stores, now showing percentage change year on year. Zero sits at the neutral centre of the ramp, so growth and decline read as two different colours rather than two shades of the same one. Hobart's slide and Chadstone's surge are visible at a glance.

Sort to reveal structure

A heatmap of randomly-ordered rows reads as noise. Sort rows and columns by similarity (hierarchical clustering, seriation) or by a meaningful key (region, time, magnitude). The structure reveals itself only when neighbouring rows are similar. The two figures below hold the same eight product lines and the same seven days; only the row order changes.

Rows in alphabetical order
Orders per day by product line, rows sorted A to Z. Every row has its own rhythm, but the dark cells are scattered and the matrix reads as texture rather than pattern.
Rows sorted by weekend share
The same cells, rows reordered from most weekday-heavy to most weekend-heavy. The matrix becomes a single diagonal: office and media lines sell Monday to Thursday, garden and sporting lines live on the weekend. Nothing was added; the order did the work.

Show the numbers when precision matters

In a 24 × 12 heatmap, the eye can pick the bright and dark regions. But for the values that matter — the highest cell, the unexpected low — direct labels (the number itself, in the cell) help. Few's principle: minimise visual lookup. The choice is a trade: labels turn the heatmap back into a table the reader can quote from, at the cost of visual noise. Show them when the cells are large enough to hold a number without crowding, and when the reader will want to cite a value; leave them off when the matrix is dense and the pattern is the point.

Colour only: quarterly margin by product line
Gross margin, per cent. The pattern is easy to see — advisory strong, hardware weak, everyone improving through the year — but no cell can be quoted without hovering.
Colour with values: the same matrix as a table-graphic
Cell labels on. Now the reader can scan for structure with the colour and confirm a number without leaving the figure — Tufte's table-graphic. Label ink is light on dark cells and dark on light ones so it never competes with the fill.

Choose the colour-blind-safe scale

Default rainbow scales are perceptually non-uniform and fail for many colour-blind readers. Use a perceptually uniform sequential scale (viridis, magma, or a single-hue ramp tuned in LAB space). Test in greyscale; the scale should still read as a sequence. The house ramps used throughout this entry are a single teal stepped in seven quantised bands for sequential data, and a teal-to-magenta ramp through a neutral centre for diverging data; both survive greyscale.

Anatomy

The composition of a heatmap
An anatomical guide

A heatmap is structurally simple: a matrix of cells, a colour scale, axis labels. The design weight goes into colour choice, cell sizing, and the discipline of showing values inside the cells when precision matters.

  • Calendar heatmap — a heatmap arranged as days × weeks. Specialised for daily activity over months or years. Separate entry.
  • Treemap — for hierarchical part-to-whole. Different reading task; both involve coloured rectangles.
  • Confusion matrix — a heatmap of predicted vs. actual classifications. The same form applied to model evaluation.
  • Choropleth — a heatmap projected onto geography. Separate entry.
  • Sparkline-augmented table — a small chart per row, embedded in the table cell. Tufte's preferred form for many time-series-by-category tasks.

Reading list

  • Tufte, E. (2006). Beautiful Evidence. On the table-graphic and dense information design.
  • Wilkinson, L. & Friendly, M. (2009). The History of the Cluster Heat Map. The genealogy of the form.
  • Bertin, J. (1967). Semiology of Graphics. The original visual variables, including the matrix.
  • Few, S. (2007). Now You See It. On tabular display for analytical work.