Temperature radial gauge
Preconfigured gauge to display temperature. Allows to configure temperature range, gradient colors, and other settings.
Who it’s for
Anyone showing a temperature that crosses zero on an instrument-style dashboard — outdoor sensors, cold-chain vessels, process temperatures in a plant mimic. The preset arrives with a full cold-to-hot gradient already painted across the scale.
What it does
The Temperature radial gauge draws a temperature as a needle on a dial whose scale is banded from blue through to red. Over the default −60 to 60 range, twelve graduated highlight bands fade from blue at the cold end to red at the hot end, with a Temperature caption and a digital value box, so the needle’s position carries the reading and the color carries its meaning.
- A graduated cold-to-hot scale ships configured, which is the one temperature convention every reader already knows.
- The range crosses zero, suiting outdoor and cold-chain readings a 0–100 dial cannot show.
- A needle on a printed scale with twelve major divisions, one per ten degrees on the default range.
- The digital value box gives the exact temperature, so the dial does not have to be read precisely.
- Animation moves the needle rather than jumping it.
- Units are converted, not just appended — the gauge respects the unit set on the key and converts to the unit chosen on the widget.
- The Temperature radial gauge shows one current reading: temperature over time belongs on a Range chart, which colors a trace by the same kind of bands.
How to set up
Data keys
The Temperature radial gauge takes one datasource, one entity and one data key.
| Key | Role | Type | Description |
|---|---|---|---|
Temperature | The value the needle points to | Timeseries | Numeric only. An attribute works equally well. The key’s own units and decimals override the widget-level ones. |
Scale
| Setting | Default | Effect |
|---|---|---|
| Ticks min / max | -60 / 60 | The ends of the scale |
| Highlights | Twelve bands, blue to red | The graduated cold-to-hot gradient painted on the scale |
| Major ticks count | 12 | Labelled divisions, one per ten degrees at the default range |
| Minor ticks count | 12 | Unlabelled subdivisions |
| Units title | Temperature | The caption printed on the dial |
Narrow the range to the band the sensor actually occupies. A cold room living between 2 and 8 degrees moves the needle by a few degrees of arc on the default scale, however far the temperature drifts.
How to customize
- To match the scale to the sensor — set Ticks min and Ticks max, then rebuild the Highlights across the new range, since the shipped twelve bands are spread across −60 to 60.
- To mark an operating window instead of a gradient — replace the graduated bands with three highlights: too cold, acceptable, too hot.
- To change the unit — set the widget’s units, which converts the incoming value rather than relabelling it.
- To retitle the dial — set Units title, which ships as
Temperature. - To drop the digital readout — turn off Value box for a purely analogue instrument.
- To style the instrument — set the Plate color, Plate border and needle gradient colors.
- To change how the needle moves — set the Animation duration and easing rule.
Tips
- Replace the gradient with an operating window on anything that is controlled rather than observed. A gradient answers “how warm is it”, while a controlled process needs “is it inside the band”, and three flat highlights say that far more clearly than twelve graduated ones.
- Rebuild the highlights whenever you change the range. The bands hold absolute values, so narrowing the scale leaves most of them off the dial entirely and the remaining colors landing nowhere near where they read as meaning anything.
Share Your Widget with the Community
Built a custom widget? Export it as a JSON from ThingsBoard and publish it to the IoT Hub through a simple 4-step wizard (Upload, Listing, Readme, Review & Submit). Share it with thousands of ThingsBoard developers worldwide and get featured in the catalog.