Heatmap
A heatmap for intensity across two categories, as an accessible table of tinted cells.
| 9am | 11am | 1pm | 3pm | 5pm | |
|---|---|---|---|---|---|
| Mon | 4 | 12 | 18 | 14 | 6 |
| Tue | 5 | 14 | 22 | 16 | 8 |
| Wed | 3 | 11 | 20 | 19 | 9 |
| Thu | 6 | 15 | 25 | 21 | 10 |
| Fri | 8 | 18 | 28 | 24 | 15 |
When to use
- Use when
- Intensity across two categories, such as orders by weekday and hour.
- Avoid when
- There are only a few values; use a table or Bar Chart.
Installation
The source lands in src/components/ui/chart-heatmap.tsx, along with any Shelf items it builds on, and .shelf/lock.json records what was installed. It's yours to edit.
Built on
- Packages
@stylexjs/stylex- Shelf items
- Chart,
foundations,utils - Figma
- In progress. See Designers and Figma.