On this page
Overview
Show code, Deployments.tsx
Variants
Tones
A heatmap is drawn in one tone, the primary by default, or any status tone, which Colors & themes describes.
Color steps
Five steps by default, the empty one included; a heatmap can have as few as two or as many as ten.
Color by rank
Each color step can start where the application chooses, such as at quantiles of the data, so a few very busy days don't leave the rest pale.
Show code, ColorByRank.tsx
A tooltip of your own
The application can lay out the tooltip itself; each day's name keeps its date and value.
Show code, CustomTooltip.tsx
Anatomy
Month
Weekday
Day
Legend
Swatch
Show code, HeatmapAnatomy.tsx
Behaviour
Languages
The months, weekdays, dates and the legend follow the application's language, and weeks start on the locale's first day, as a calendar's do.
Show code, ApplicationStrings.tsx
Adapting to width
The heatmap is never wider than its container: a narrow one scrolls the weeks, starting at the latest. On touch screens, days grow to fit a fingertip.
Show code, ScrollingWeeks.tsx
Rules
A heatmap shows the pattern; put the exact figures elsewhere, where people compare them.
Use it when
- A count per day over weeks or months, such as deployments
- A pattern that matters more than each day's number
Names
Name the heatmap after what it counts and when, such as Deployments in the last year, and give each day a value with its unit, such as 4 deployments.
Accessibility
| Key | Action |
|---|---|
| Tab, Shift+Tab | Moves into the grid, on the latest or last focused day. |
| ↑, ↓ | Moves to the previous or next day. |
| ←, → | Moves to the same weekday a week earlier or later. |
| Home, End | Moves to the same weekday in the first or last week. |
| Page Up, Page Down | Moves to the first or last day of the week. |
| Ctrl+Home, Ctrl+End | Moves to the first or the latest day. |
| Esc | Hides the tooltip. |