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. |