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

Mon, Mar 30
Tue, Mar 31
Wed, Apr 1
Thu, Apr 2
Fri, Apr 3
Sat, Apr 4
Sun, Apr 5
00:00
15.6
17.4
14.2
15.9
14.8
17.2
16.6
01:00
14.7
16.1
12.3
12.8
13.5
14.2
14.1
02:00
12.2
15.1
11.9
13.3
13.4
11.9
10.6
03:00
11.6
10.1
8.8
9.6
10.2
13.0
12.2
04:00
10.3
9.3
12.3
9.3
9.4
9.6
8.4
05:00
10.4
12.7
10.1
11.1
9.0
11.4
10.1
06:00
9.7
9.5
10.0
8.5
9.2
9.4
12.8
07:00
10.8
13.2
11.2
12.6
12.0
12.1
13.4
08:00
13.3
12.8
14.0
11.4
13.3
10.5
12.9
09:00
15.1
13.2
15.6
14.4
12.2
13.7
16.3
10:00
14.3
15.9
18.2
15.4
17.4
16.5
17.5
11:00
17.6
19.1
20.3
17.3
18.4
18.8
17.0
12:00
20.3
17.3
21.7
19.8
21.0
21.6
17.6
13:00
22.8
22.5
20.1
23.6
22.8
23.4
24.2
14:00
21.2
23.1
26.3
24.2
24.1
24.3
24.6
15:00
23.2
25.4
23.9
26.6
25.7
25.2
24.4
16:00
27.6
26.7
25.1
26.9
24.8
26.6
26.9
17:00
24.7
28.0
27.7
26.9
27.1
27.2
25.7
18:00
27.2
25.9
27.1
23.4
27.5
24.7
25.1
19:00
25.7
22.7
27.2
24.7
27.0
24.8
26.3
20:00
24.4
22.7
23.3
21.7
23.0
25.0
22.1
21:00
22.1
23.1
22.3
23.3
21.9
23.8
21.2
22:00
19.1
21.4
18.1
19.9
19.1
22.0
17.2
23:00
18.0
18.8
19.6
19.6
17.7
19.4
17.3
8.4°C
28.0°C
CwHeatmap example Copy code 
<CwHeatmap
	data={weekData}
	unit="°C"
	title="Field Temperature – Last 7 Days"
/>

14 days, custom colours

Soil Temperature – Last 14 Days

Mon, Mar 23
Tue, Mar 24
Wed, Mar 25
Thu, Mar 26
Fri, Mar 27
Sat, Mar 28
Sun, Mar 29
Mon, Mar 30
Tue, Mar 31
Wed, Apr 1
Thu, Apr 2
Fri, Apr 3
Sat, Apr 4
Sun, Apr 5
00:00
16.3
17.5
14.9
17.0
15.8
15.5
16.3
15.9
15.2
14.9
17.0
15.8
13.8
17.4
01:00
14.5
16.6
15.0
14.9
12.4
15.9
13.1
15.7
14.5
14.6
11.7
13.3
14.4
13.8
02:00
11.2
14.6
12.8
13.2
13.3
13.3
14.4
10.1
14.6
10.0
14.3
13.7
13.8
14.2
03:00
12.5
11.6
12.0
12.0
11.0
10.0
12.2
11.8
12.2
13.1
11.0
11.2
12.4
10.4
04:00
10.2
11.9
10.0
10.4
8.7
10.3
11.7
11.0
10.3
10.2
12.3
11.1
11.5
11.9
05:00
8.6
9.4
9.8
9.5
9.7
10.9
8.1
9.4
10.2
9.5
9.6
8.6
10.2
11.6
06:00
8.5
11.2
9.6
10.2
12.2
9.5
10.9
12.3
8.5
9.9
9.0
12.8
8.5
10.8
07:00
13.5
10.2
12.5
10.9
10.5
12.5
12.7
13.0
12.9
12.5
9.9
11.0
12.2
13.2
08:00
11.9
12.9
14.2
14.1
10.8
11.4
12.3
13.6
13.4
12.2
11.6
13.7
13.3
13.6
09:00
13.0
15.1
13.3
11.9
12.9
13.7
14.1
16.0
11.8
14.5
12.0
14.7
11.6
15.5
10:00
16.8
15.3
15.2
17.5
16.5
17.8
16.7
16.1
16.1
15.0
14.7
15.2
16.8
15.4
11:00
19.3
16.5
16.1
19.1
19.3
16.9
19.9
15.6
19.3
18.5
17.3
17.2
18.7
15.7
12:00
19.9
20.1
20.6
20.8
21.1
17.7
18.0
21.6
19.4
17.9
18.8
19.8
19.0
21.8
13:00
21.4
22.2
22.2
22.6
20.7
21.3
21.3
20.3
23.2
23.7
20.8
22.4
23.4
24.6
14:00
22.1
23.0
24.1
23.5
21.3
21.6
25.2
23.7
23.8
21.6
24.4
25.7
26.1
22.9
15:00
25.7
24.5
23.6
27.3
24.9
23.1
22.6
22.8
25.9
23.5
23.6
26.5
23.8
24.2
16:00
26.9
26.8
27.2
27.2
24.7
24.2
27.6
25.0
26.7
27.2
25.6
28.0
26.2
25.6
17:00
27.3
26.8
24.7
25.1
25.3
27.8
26.9
27.5
26.1
27.0
26.1
25.0
25.7
26.8
18:00
26.9
24.1
27.5
23.7
24.5
25.2
25.0
24.0
28.1
25.4
24.7
24.5
24.5
26.1
19:00
24.6
23.5
27.2
25.1
24.6
25.6
24.1
25.9
24.3
25.5
23.9
26.5
25.2
24.9
20:00
23.5
24.7
23.3
24.0
21.7
22.1
23.2
25.0
25.3
21.2
23.4
22.5
25.2
24.6
21:00
21.4
23.6
22.5
21.1
22.5
19.4
20.6
23.5
20.9
24.6
21.4
21.3
22.6
23.3
22:00
19.3
18.7
18.2
20.3
19.2
20.7
20.3
18.1
20.3
20.8
22.0
21.2
19.6
19.1
23:00
18.9
16.5
16.2
16.5
16.4
19.1
18.8
20.7
18.4
16.5
18.1
19.1
16.0
18.0
8.1°C
28.1°C

Fahrenheit scale, fixed range

Temperature (°F) – Fixed 50–90 Range

Mon, Mar 30
Tue, Mar 31
Wed, Apr 1
Thu, Apr 2
Fri, Apr 3
Sat, Apr 4
Sun, Apr 5
00:00
60.1
63.3
57.6
60.6
58.6
63.0
61.9
01:00
58.5
61.0
54.1
55.0
56.3
57.6
57.4
02:00
54.0
59.2
53.4
55.9
56.1
53.4
51.1
03:00
52.9
50.2
47.8
49.3
50.4
55.4
54.0
04:00
50.5
48.7
54.1
48.7
48.9
49.3
47.1
05:00
50.7
54.9
50.2
52.0
48.2
52.5
50.2
06:00
49.5
49.1
50.0
47.3
48.6
48.9
55.0
07:00
51.4
55.8
52.2
54.7
53.6
53.8
56.1
08:00
55.9
55.0
57.2
52.5
55.9
50.9
55.2
09:00
59.2
55.8
60.1
57.9
54.0
56.7
61.3
10:00
57.7
60.6
64.8
59.7
63.3
61.7
63.5
11:00
63.7
66.4
68.5
63.1
65.1
65.8
62.6
12:00
68.5
63.1
71.1
67.6
69.8
70.9
63.7
13:00
73.0
72.5
68.2
74.5
73.0
74.1
75.6
14:00
70.2
73.6
79.3
75.6
75.4
75.7
76.3
15:00
73.8
77.7
75.0
79.9
78.3
77.4
75.9
16:00
81.7
80.1
77.2
80.4
76.6
79.9
80.4
17:00
76.5
82.4
81.9
80.4
80.8
81.0
78.3
18:00
81.0
78.6
80.8
74.1
81.5
76.5
77.2
19:00
78.3
72.9
81.0
76.5
80.6
76.6
79.3
20:00
75.9
72.9
73.9
71.1
73.4
77.0
71.8
21:00
71.8
73.6
72.1
73.9
71.4
74.8
70.2
22:00
66.4
70.5
64.6
67.8
66.4
71.6
63.0
23:00
64.4
65.8
67.3
67.3
63.9
66.9
63.1
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

  1. 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.
  2. 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.
  3. 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

APITypeDetails
data Required
CwHeatmapDataPoint[]Timestamped numeric readings.
days

Default: 7

numberHow many days to render.
min
numberOptional fixed low end of the scale.
max
numberOptional fixed high end of the scale.
unit

Default: degC

stringUnit label shown in tooltips and headings.
title

Default: Temperature Heatmap

stringHeading shown above the chart.
rowHeight

Default: 24

numberHeight 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 }) => voidRuns when a heatmap cell is clicked.

Copy-paste examples

These snippets intentionally show the full public API surface the live demo relies on.

Auto-scaled temperature heatmap

Use this when the chart only needs to read well on its own.

Auto-scaled temperature heatmap Copy code 
<CwHeatmap
	data={weekData}
	title="Field temperature - last 7 days"
	unit="degC"
	onCellClick={(point) => console.log(point)}
/>
Fixed range comparison heatmap

Use fixed ranges when multiple heatmaps should be compared directly.

Fixed range comparison heatmap Copy code 
<CwHeatmap
	data={twoWeekData}
	days={14}
	title="Soil temperature"
	unit="degF"
	min={50}
	max={90}
	rowHeight={20}
	colors={['#06b6d4', '#a3e635', '#f97316']}
/>