Temperature range chart

Who it’s for

Building managers, city planners, and environmental monitoring teams ask “across the full history window, which temperature bands was this location in and for how long?” They want a compact visual that shows the distribution of temperature conditions over time, with each segment color-coded to its band — information a line chart shows but does not emphasize.

What it does

A week of temperature readings that spans 8°C overnight and 28°C at midday renders as a range chart with dark-blue segments during the cold early hours, light-blue segments during the cool morning, and orange segments through the warm afternoon — all on a single scrollable timeline with data zoom.

• Color-coded range chart where each point in time is colored by its temperature band across seven levels from Extreme Cold to Extreme Heat
• Data zoom control for scrolling and zooming into specific time windows without changing the dashboard time range
• Shows one sensor’s data; it does not compare multiple probes or show a numeric current value overlay

How to set up

Data keys

Key	Role	Type	Description
temperature	Chart series	Timeseries	Temperature in °C; drives the range chart coloring

The widget ships with a simulated function datasource key labeled Temperature, so it draws random values until you point the datasource at a device and rename the key.

To point it at your own device: open the dashboard in edit mode, open the widget’s Datasources, pick the entity or entity alias, and replace the function key with the key your device reports.

If the key has never reported for the selected time window, the chart is empty.

Value ranges

Range (°C)	Level	Color
below −20	Extreme Cold	Deep Blue
−20 – 0	Cold	Blue
0 – 10	Cool	Light Blue
10 – 20	Moderate	Orange
20 – 30	Warm	Orange
30 – 40	Hot	Red-Orange
above 40	Extreme Heat	Red

How to customize

• To use your own temperature thresholds — edit the Range colors in the widget settings; adjust the seven default bands to match your operational or comfort requirements.
• To display in °F — add a unit conversion function to the data key; adjust the range boundaries to Fahrenheit equivalents.
• To change the time window shown — adjust the Time window on the dashboard, or use the built-in data zoom control.
• To match your dashboard’s fonts — set the font options in the widget appearance settings.

Tips

• This chart is most useful over multi-day or multi-week windows where the alternation between cool nights and warm days, or the transition through seasonal bands, is the story — for single-day views the simple temperature chart card is usually clearer.
• The data zoom lets users drill into a specific event (overnight frost, afternoon heatwave) without navigating away or changing the dashboard time range.
• Pair with a humidity range chart to build a combined comfort-conditions timeline that shows when heat and humidity coincided during a summer period.