Heatmap
Chart where each cell shows the value of a category pairing, highlighting the most and least common combinations.
Heatmaps use a grid of colored cells to represent numeric values at the intersection of two categories. Rows and columns represent values of the categorical variables, using colors to represent the numeric value for each category pairing and reveal the most and least common combinations.
Also known as: Highlight table, matrix chart, mosaic plot, density plot.
Anatomy
A. Title (optional): Brief text summarizing the contents of the chart.
B. Data table button (optional): UI icon button enabling users to view the chart’s data in table format.
C. Keyboard instructions (required): UI icon button enabling users to access the chart’s keyboard navigation instructions.
D. Subtitle (optional): Additional text providing more details.
E. Plot canvas (required): Area containing the graphic part of the chart including heatmap cells, axes, and other elements.
F. Data markers (required): Colored cells representing the numeric value for a category pairing.
G. Vertical axis (required): Scale representing a category, group, or date period.
H. Horizontal axis (required): Scale representing a category, group, or date period.
I. Legend (optional): Explains how to interpret the color scale used in the heatmap cells.
Usage
| When to use | When not to use |
|---|---|
| To show patterns or clusters in data visually, making it easy to spot high and low values. | When precise comparisons between individual data points are required. Consider using a bar chart or dot plot instead. |
| To summarize large numeric datasets across two dimensions (e.g., categories or time intervals). | When the dataset has extreme outliers that distort the color scale. Consider using a dumbbell plot instead. |
| When the goal is to highlight variation and distribution rather than precise individual values. | When the numeric variable shows little variation, as color differences will be hard to interpret. Consider using a bar chart instead. |
| To quickly identify correlations or relationships between variables. | When comparing too many categories, which can make the heatmap cluttered. Consider grouping or filtering categories. |
Best practices
- Include a legend unless data labels are included in every cell.
Content
- Always use sentence case except for proper nouns or acronyms.
- Use plain language and avoid abbreviations or jargon.
- Provide more detailed explanations and definitions for any complex metrics if needed.
- Reference Content for additional guidance on crafting content within apps and experiences.
Titles and subtitles
- Use clear, informative titles to help users understand the chart’s topic and key takeaways.
- Frame titles as a headline that summarizes the trend or insight.
- Use subtitles to add more detail about the data being shown and help users understand how to interpret the chart.
- Consider phrasing titles or subtitles as questions to guide the user’s analysis, especially on exploratory dashboards where users are likely to spend significant time analyzing data.
- Avoid titles and subtitles that are too general or vague.
Labels
- Ensure numbers, dates, and other data or axis labels are formatted consistently.
- Follow plain language principles, such as using shorter and simpler words and phrases.
Number format
Simplify number formats to remove unnecessary details and reduce the mental effort needed to compare numbers. If needed, provide higher-precision numbers in a tooltip for users who want more information.
| Data type | Recommended format |
|---|---|
| Large numbers | Use abbreviated format, such as 1.2k instead of 1,200. |
| Percentage | Use whole percentage points, except for special cases where basis points are needed. |
| Basis points | Use basis points (bps) when change percentage is very small. 1 bps equals 0.01% (0.0001 in decimal format). |
| Currency | Round to the appropriate level of detail that is required for the analysis. For example, for U.S. currency round to the nearest dollar amount. |
