Heatmap

Best for

Spotting patterns in a grid of values across two dimensions, such as site visits by day and hour or sales by product and month.

Avoid when

Readers need exact values or precise comparisons between individual cells (use bars or a table).

Data you need

Two categorical or binned columns for rows and columns, and one numeric value per combination.

A heatmap is a table where each cell is colored by its value instead of showing a number. Rows are one category, columns another, and the color makes patterns jump out: the busy hours of the week, the months when each product sells, the regions where a metric is rising.

It trades precision for pattern. Nobody reads a heatmap to learn that Tuesday at 10:00 had 1,482 visits. They read it to see that weekday mornings are busy and Sunday nights are dead. If the reader needs exact numbers, give them a table.

When to use a heatmap

Use a heatmap when you have one value for each combination of two dimensions, and the combination is the point. Common cases:

• Website visits or post engagement by day of week and hour
• Sales by product and month
• Survey answers by question and respondent group
• Correlations between every pair of variables in a dataset

The grid should be reasonably full. A heatmap with most cells empty is mostly white space. It also needs enough cells to carry a pattern; a 2 by 3 grid is better as a small table or grouped bars.

The day-by-hour grid

The classic heatmap puts days of the week down the side and hours across the top. It's the quickest way to see when an audience is active, and it is the backbone of most posting-schedule advice for social media.

A few details make this layout work. Start the week on the day your readers expect (Monday in most business contexts). Label every third hour rather than every hour so the labels don't crowd. Use the reader's time zone, and say which one in the subtitle, because an audience spread across time zones blurs the peaks. The X engagement heatmap guide walks through building one from post data.

Choosing a color scale

The color scale is the heatmap's axis, so choose it as carefully as you would choose an axis range.

A sequential scale runs from light to dark in one hue (or a smooth blend of two). Use it when values go from low to high and only the size matters: visit counts, sales, temperature in a single season. Light means little, dark means a lot, and nearly every reader gets that right without a legend.

A diverging scale uses two hues that meet at a pale neutral color in the middle. Use it when the data has a meaningful center and the direction matters: change versus last year, difference from a target, positive versus negative sentiment.

Set the midpoint of a diverging scale at the real center of the data (usually zero), and make the scale symmetric, so -20% and +20% are equally intense. Otherwise one side looks more dramatic than it is.

Skip rainbow scales. Their hues have no natural order, they create sharp visual boundaries where the data has none, and red-green combinations fail for many readers with color vision deficiency. The color guide and the accessible charts guide cover this in detail.

Rule of thumb: if the data has a meaningful zero or target in the middle, use a diverging scale. Otherwise, use one hue from light to dark.

Order rows and columns on purpose

Time dimensions have a natural order, so keep it. Everything else, products, regions, survey questions, is up to you, and alphabetical order is rarely the best choice. A good order can turn a grid of noise into an obvious pattern.

Useful orderings include sorting by total (biggest rows at the top), by the column where each row peaks, or by similarity, so rows with similar patterns sit together. Statistical tools can cluster rows automatically by similarity, which is standard for correlation matrices. Whatever you choose, apply it consistently if you show several heatmaps side by side, or readers will compare the wrong rows.

Legends and labels

A heatmap almost always needs a legend, because color alone doesn't say what the values are. Keep it small, put it close to the grid, and show the actual range with labeled ends ("fewer" and "more", or "0" and "1,500 visits"). A stepped legend with five to seven classes is easier to match by eye than a smooth gradient.

Binning values into a few color steps also helps the reader. With a continuous scale, two cells that differ by 3% are indistinguishable anyway; with steps, the reader can at least say which class a cell is in.

Add numbers inside cells when the grid is small (up to about 10 by 10) and the values matter. Switch the text color between dark and light depending on the cell's background so it stays readable. For large grids, label the few cells your text talks about and leave the rest clean.

Cells, gaps and empty values

Leave a thin gap between cells. It separates neighbors and keeps the grid from looking like a blurry gradient. Keep cells roughly square or slightly wide, which makes rows and columns equally easy to scan.

Missing values need their own look. Don't color them as zero, which says something specific. A white or hatched cell, explained in the legend ("no data"), tells the truth.

Watch out for rows with very different sizes. If one product sells ten times more than the others, its row dominates the color scale and every other row looks pale. You can color each row relative to its own maximum to show timing patterns, but say so in the subtitle, because then the colors no longer compare across rows.

Common mistakes

A good heatmap rewards a five-second glance with the pattern and a thirty-second look with the details. If readers have to study the legend before they see anything, simplify the scale.