Skip to content
Stand with Ukraine flag

Temperature radial gauge

  • Widget
  • v1.0.0
  • Sep 1, 2026
  • MIT license
  • v4.2+ | Built-in
Temperature radial gauge

Preconfigured gauge to display temperature. Allows to configure temperature range, gradient colors, and other settings.

Widget Type
  • Latest
Category
  • Gauges & Indicators
Use Cases
  • Environment Monitoring
  • Cold Chain
  • Smart Building

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.

KeyRoleTypeDescription
TemperatureThe value the needle points toTimeseriesNumeric only. An attribute works equally well. The key’s own units and decimals override the widget-level ones.

Scale

SettingDefaultEffect
Ticks min / max-60 / 60The ends of the scale
HighlightsTwelve bands, blue to redThe graduated cold-to-hot gradient painted on the scale
Major ticks count12Labelled divisions, one per ten degrees at the default range
Minor ticks count12Unlabelled subdivisions
Units titleTemperatureThe 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.