Component
HeatmapChart
A grid of values coloured on the sequential ramp.
import { HeatmapChart } from '@loidolt/theme-charts';
Example
Heatmap of 5 rows by 6 columns. Highest 26 at 14:00 · Fri; lowest 5 at 12:00 · Mon.
| Time | Mon | Tue | Wed | Thu | Fri | Sat |
|---|---|---|---|---|---|---|
| 08:00 | 23 | 21 | 19 | 17 | 15 | 9 |
| 10:00 | 14 | 19 | 24 | 6 | 11 | 12 |
| 12:00 | 5 | 17 | 6 | 18 | 7 | 15 |
| 14:00 | 19 | 15 | 11 | 7 | 26 | 18 |
| 16:00 | 10 | 13 | 16 | 19 | 22 | 21 |
Notes
- The ramp runs from least to most in both themes; in dark it gets lighter toward "most", so the busiest cells always stand out from the surface.
Props
Generated from the component source, so it cannot drift from the implementation.
| Prop | Type | Default | Notes |
|---|---|---|---|
data required | HeatmapData | — | Column and row labels, and the value in each cell. |
cornerLabel | string | 'Row' | Heading of the data table's first column, which holds the row labels. |
Plus the attributes of Omit<ComponentProps<typeof Chart>, 'option' | 'table' | 'extensions'>andHeatmapOptions, forwarded to the root element.