Skip to content
Stand with Ukraine flag

Thermometer scale

  • Widget
  • v1.0.0
  • Sep 1, 2026
  • MIT license
  • v4.2+ | Built-in
Thermometer scale

Preconfigured widget 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 as a column rather than a dial — the shape of a real thermometer, on a plant mimic, an environmental dashboard or a cold-chain screen where the instrument should look like the instrument.

What it does

The Thermometer scale draws a temperature as a linear gauge with a printed scale and a digital value box. The default −60 to 100 range in degrees Celsius carries eight major divisions with minor ticks between them, an orange indicator, and a Temperature caption, presented as a horizontal instrument rather than as a plain bar.

  • A linear scale with printed numbers, which reads as a measuring instrument rather than as a progress bar.
  • Highlight bands can mark regions of the scale, so a normal and an out-of-range zone are painted on rather than inferred.
  • The digital value box gives the exact temperature, so the scale does not have to be read precisely.
  • The bar, its background, the plate and every font are styled independently, including gradients on the progress bar.
  • Animation moves the indicator 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 Thermometer scale shows one current reading: temperature over time belongs on a Range chart.

How to set up

Data keys

The Thermometer scale takes one datasource, one entity and one data key.

KeyRoleTypeDescription
TempThe value the indicator 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 / 100The ends of the scale
Major ticks count8Labelled divisions
Minor ticks count8Unlabelled subdivisions
HighlightsNoneColored bands painted on the scale
Units titleTemperatureThe caption printed on the instrument

Narrow the range to what the sensor actually reads. On the default −60 to 100 scale a controlled process occupies a few millimetres of the bar, and an excursion large enough to matter is invisible.

How to customize

  • To match the scale to the sensor — set Ticks min and Ticks max, and pick a major tick count that lands the labels on round numbers.
  • To mark an operating window — add Highlights bands at the temperatures that separate acceptable from not.
  • To change the unit — set the widget’s units, which converts the incoming value rather than relabelling it.
  • To retitle the instrument — set Units title, which ships as Temperature.
  • To drop the digital readout — turn off Value box for a purely analogue scale.
  • To restyle the bar — set the Progress bar color gradient, the Bar background color gradient and the bar stroke.
  • To change how the indicator moves — set the Animation duration and easing rule.

Tips

  • Narrow the range before anything else. The shipped −60 to 100 scale spans most of what a thermometer could ever read, which makes it useless for the controlled processes people usually point it at.
  • Choose this over a radial gauge when several temperatures sit on one screen. Linear scales share an axis direction and are compared by position, whereas a row of dials has to be read one needle at a time.

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.