Skip to content
Stand with Ukraine flag

Speed gauge

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

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

Widget Type
  • Latest
Category
  • Gauges & Indicators
Use Cases
  • Fleet Tracking
  • Industrial Automation
  • Robotics

Who it’s for

Anyone showing a speed or a rate on an instrument-style dashboard — vehicle telematics, a conveyor or line rate, a pump speed. The preset arrives configured as a speedometer, with a caution band and a danger band already placed on the scale.

What it does

The Speed gauge draws a rate as a needle on a dial with warning bands painted on the scale. The default 0–180 range in mph carries an amber band from 80 to 120 and a red one from 120 up, so a needle in the red is recognized without the number being read.

  • Warning bands ship configured — amber and red regions on the scale, which is the convention a speedometer already implies.
  • A needle on a printed scale, with nine major divisions and minor ticks between them.
  • The digital value box gives the exact rate, so the dial does not have to be read precisely.
  • Animation moves the needle rather than jumping it, which matches how a rate actually changes.
  • Plate, needle, ticks and fonts are styled independently.
  • 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 Speed gauge shows one current rate: it plots no history, and its bands are ordinary highlights that can be moved anywhere.

How to set up

Data keys

The Speed gauge takes one datasource, one entity and one data key.

KeyRoleTypeDescription
SpeedThe rate 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 / max0 / 180The ends of the scale; the default is a road-speed range
HighlightsAmber 80–120, red 120–180The warning and danger bands painted on the scale
Major ticks count9Labelled divisions
Minor ticks count9Unlabelled subdivisions
Widget unitsmphThe unit printed with the value

Set the maximum to the equipment’s rated speed and move the highlight bands to its real limits. Both ship as road-speed defaults, and leaving either in place puts the caution zone somewhere arbitrary.

How to customize

  • To put the bands at the real limits — edit Highlights, since the shipped amber and red regions are speedometer defaults rather than your equipment’s.
  • To match the scale to the machine — set Ticks min and Ticks max, and pick a major tick count that lands the labels on round numbers.
  • To change the unit — set the widget’s units, which converts the incoming value rather than relabelling it.
  • To add a caption — turn on Units title and set its text, which this preset leaves off.
  • 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

  • Move the highlight bands before deploying this anywhere. A dial that shows red at 120 on a machine rated to 60 looks authoritative and reports nothing, and the preset has no way of knowing your limits.
  • Set the maximum a little above the highest achievable rate rather than exactly at it. A needle pinned at the end of the scale cannot show whether the machine is at its limit or past it, which is the distinction that matters at that moment.

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.