Skip to content
Stand with Ukraine flag

Threshold bar

  • Widget
  • 18 installs
  • v1.0.0
  • Aug 18, 2026
  • MIT license
  • v4.2+
Threshold bar

Shows one value on a horizontal bar against color zones, with an optional target. Each zone runs from its own start to the start of the next one. The range, every zone edge and the target take either a number or ${key}, and the widget then reads that key live from the attributes or telemetry of the same entity, so a device can carry its own limits. The bar either fills to the value in the color of its zone, or shows all zones with the value as a marker. Off-scale values are pinned and flagged.

Widget Type
  • Latest
Category
  • Cards & Info
  • Gauges & Indicators
  • Charts & Graphs

Who it’s for

Anyone glancing at one reading who wants to know “is this normal for right now, or unusually high or low compared to its own recent history?” rather than compared to a fixed target. A single number means little on its own; this card puts it next to the minimum, average and maximum it has actually produced over the current time window, so the reading is judged against itself.

What it does

A temperature key averaging 21°C over the last hour, with today’s reading at 24°C: the card shows 24°C as the large number, 19° / 21° / 24° as minimum, average and maximum underneath, and the range bar’s fill — which ends at the average — sits noticeably left of the tick marking the current reading. At a glance, the reading is running warm for its own recent range, without anyone needing to know in advance what “warm” means for this particular device.

  • Minimum, average and maximum, computed from exactly the key you configured — nothing extra to set up.
  • A range bar with a fill and a tick — the fill ends at the average, and a tick marks the current reading, so the two line up or pull apart visually.
  • Names itself from the data key’s label — no title to type, and the label is hidden automatically once the widget’s own title is switched on, so the card never shows two headings.
  • An icon with a circular, rounded-square or no background.
  • Scales to fill the card at any size on the dashboard grid.
  • Statistics only cover the time window — the stretch before the first reading isn’t counted, since its value is unknowable, and a device that stops reporting keeps its last reading on the card until the window moves past it.

How to set up

Data keys

KeyRoleTypeDescription
any numeric keyLatest reading, and the source of the minimum, average and maximumAttribute or TimeseriesExactly one key is used — the widget won’t accept a second. Units and decimals come from the key, falling back to the widget’s own, and otherwise rounded to two decimal places.

How to customize

Layout

  • Let the whole card scale together, or keep fixed sizes — Scale the content to fill the card; off keeps the configured font sizes at every card size.

Label

  • Show the key label above the value — hidden automatically once the widget’s own title is switched on in Appearance — plus its own font and color.

Icon

  • Show an icon, with its own glyph, size, color, background shape (circle, rounded square or none) and background color.

Current value

  • The large reading’s font and color.

Minimum, average, maximum

  • Show or hide the three numbers, add a min / avg / max label in front of each, choose the separator between them, and set their font and color — the same font and color are also used for the units next to the reading.

Range bar

  • Show or hide the bar, and set the colors of its track, its fill up to the average, and the current-value tick.

How the numbers are calculated

NumberMeaning
ReadingThe last value received inside the time window
MinimumThe smallest value in the window
AverageThe mean of the values in the window
MaximumThe largest value in the window

The average is a plain mean of the readings, which matches what the platform’s own AVG aggregation reports elsewhere, so this card and a chart beside it agree. For a device that reports irregularly, set the time window’s aggregation to AVG with a grouping interval: the platform then resamples onto an even grid, so a burst of messages no longer outweighs a quiet hour.

The bar is normalized to the window, not to a fixed scale: its left edge is the minimum and its right edge is the maximum. The fill ends at the average and the tick marks the current reading, so a tick to the right of the fill means the value is currently running above its own average. When every reading in the window is identical, the bar is drawn full. When the window holds no numeric readings at all, the card shows “No readings in this period” instead of a value, and hides the bar and the statistics.

Tips

  • No external libraries or CDN requests are involved — the card renders entirely on its own, so it works offline.
  • The card’s own title is separate from its data-key label — leave the widget title off in Appearance if you want the key’s label to be the only heading, since the two are never shown together.__

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.