Auto-scaled temperature heatmap
Use this when the chart only needs to read well on its own.
<CwHeatmap
data={weekData}
title="Field temperature - last 7 days"
unit="degC"
onCellClick={(point) => console.log(point)}
/>CwHeatmap
24-hour × N-day temperature heatmap with colour-coded cells, legend, and hover tooltips. Defaults to 1 week.
Default (7 days)
Field Temperature – Last 7 Days
Sat, Aug 15
Sun, Aug 16
Mon, Aug 17
Tue, Aug 18
Wed, Aug 19
Thu, Aug 20
Fri, Aug 21
00:00
01:00
02:00
03:00
04:00
05:00
06:00
07:00
08:00
09:00
10:00
11:00
12:00
13:00
14:00
15:00
16:00
17:00
18:00
19:00
20:00
21:00
22:00
23:00
8.3°C 28.0°C
<CwHeatmap
data={weekData}
unit="°C"
title="Field Temperature – Last 7 Days"
/>14 days, custom colours
Soil Temperature – Last 14 Days
Sat, Aug 8
Sun, Aug 9
Mon, Aug 10
Tue, Aug 11
Wed, Aug 12
Thu, Aug 13
Fri, Aug 14
Sat, Aug 15
Sun, Aug 16
Mon, Aug 17
Tue, Aug 18
Wed, Aug 19
Thu, Aug 20
Fri, Aug 21
00:00
01:00
02:00
03:00
04:00
05:00
06:00
07:00
08:00
09:00
10:00
11:00
12:00
13:00
14:00
15:00
16:00
17:00
18:00
19:00
20:00
21:00
22:00
23:00
7.9°C 28.5°C
Fahrenheit scale, fixed range
Temperature (°F) – Fixed 50–90 Range
Sat, Aug 15
Sun, Aug 16
Mon, Aug 17
Tue, Aug 18
Wed, Aug 19
Thu, Aug 20
Fri, Aug 21
00:00
01:00
02:00
03:00
04:00
05:00
06:00
07:00
08:00
09:00
10:00
11:00
12:00
13:00
14:00
15:00
16:00
17:00
18:00
19:00
20:00
21:00
22:00
23:00
50.0°F 90.0°F
Documentation Upgrade
Start here
CwHeatmap turns timestamped numeric readings into a day-by-hour grid. Feed it normalized points, then choose whether the scale should auto-fit the data or stay fixed across screens.
How to think about it
- Normalize the data to timestamp + value The component expects a flat array of points. You do not need to group by day or hour yourself.
- Decide between auto and fixed scale Auto scale makes one chart read well by itself. Fixed `min` and `max` make multiple charts easier to compare directly.
- Use `onCellClick` for drill-downs The callback gives you the resolved day, hour, and value so you can open a detail view or filter another widget.
Props and callbacks
| API | Type | Details |
|---|---|---|
data Required | CwHeatmapDataPoint[] | Timestamped numeric readings. |
days Default: | number | How many days to render. |
min | number | Optional fixed low end of the scale. |
max | number | Optional fixed high end of the scale. |
unit Default: | string | Unit label shown in tooltips and headings. |
title Default: | string | Heading shown above the chart. |
rowHeight Default: | number | Height of each day row in pixels. |
colors | [string, string, string] | Low, mid, and high scale colors. |
onCellClick | (point: { date: string; hour: number; value: number | null }) => void | Runs when a heatmap cell is clicked. |
noData | string | boolean | When present, blurs the chart and shows an overlay. Pass localized text, or use the bare `noData` attribute for "No Data Available". |
Copy-paste examples
These snippets intentionally show the full public API surface the live demo relies on.
Fixed range comparison heatmap
Use fixed ranges when multiple heatmaps should be compared directly.
<CwHeatmap
data={twoWeekData}
days={14}
title="Soil temperature"
unit="degF"
min={50}
max={90}
rowHeight={20}
colors={['#06b6d4', '#a3e635', '#f97316']}
/>