Heatmap Chart
A grid where colour carries the value, for spotting patterns across two dimensions at once.
Week 1Week 2Week 3Week 4MonTueWedThuFriSatSun
Reading it
A heatmap is for finding where something concentrates — the quiet weekend column above, the busy Thursday. It's deliberately bad at exact values: nobody reads a precise number off a shade. If the specific figures matter more than the pattern, use a Table.
Shape of the data
data is row-major: data[row][col]. Rows shorter than colLabels leave gaps, so pad sparse data with zeroes rather than leaving entries out.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| data | number[][] | Rows of values. Every row should be the same length as colLabels. | |
| rowLabels | string[] | Labels down the left, one per row. | |
| colLabels | string[] | Labels across the top, one per column. | |
| valueLabel | string | What a cell's number counts, used in the tooltip. | |
| size | 'sm' | 'md' | 'lg' | 'xl' | 'md' | Preset cell size. |
Why it works this way
Why
- A heatmap is for finding where something concentrates. It is deliberately bad at exact values, because nobody reads a precise number off a shade.
- data is row-major, data[row][col]. Rows shorter than colLabels leave gaps.
Don't
- Don't use it when the specific figures matter more than the pattern. Use a Table.
- Don't leave entries out of sparse data. Pad with zeroes.