Skip to content
Stand with Ukraine flag

Value range card

  • Widget
  • 8 installs
  • v1.0.0
  • Aug 18, 2026
  • MIT license
  • v4.2+
Value range card

Shows the latest reading of a single key together with the minimum, average and maximum of that same key over the dashboard time window, so a number can be read against its own recent range instead of on its own. A thin bar spans min to max: its fill ends at the average and a tick marks the current reading. The card names itself from the data key label, and scales its icon, reading and statistics to fill whatever space it is given.

Widget Type
  • Timeseries
Category
  • Cards & Info

Window stats card

Shows the latest reading of a single key next to the minimum, average and maximum of that same key over the dashboard time window. A thin bar spans the minimum to the maximum, so the current number can be read against its own recent range instead of on its own.

Features

  • Minimum, average and maximum computed from the configured key — nothing extra to set up
  • Range bar with a fill that ends at the average and a tick at the current reading
  • Card names itself from the data key label, so no title has to be typed
  • Configurable icon with a circular, rounded square or no background
  • Fonts, colours and sizes set through the standard font and colour pickers
  • Optional auto-scaling that fills the card at any size on the dashboard grid
  • No external libraries, no CDN requests

Data keys

  • any numeric key (timeseries or attribute) — the value whose latest reading and window statistics are shown

Exactly one key is used. The widget declares maxDataKeys: 1, so a second key cannot be added by mistake. Units and decimal places come from that key’s own settings; if they are not set there, the widget’s units and decimals are used, and otherwise values are rounded to at most two decimal places.

Configuration

LayoutScale the content to fill the card grows and shrinks the icon, reading, bar and statistics together so they always fill the available space. Turn it off to keep the configured font sizes at every card size.

Label — the label of the configured data key is shown above the value, with its own font and colour. It is hidden automatically when the widget title is switched on in Appearance, so the card never shows two headings.

Icon — icon, size, colour, background shape (circle, rounded square or none) and background colour. Switching the icon off hides the whole group.

Current value — font and colour of the large reading.

Minimum, average, maximum — whether the three numbers are shown, whether each one carries a min, avg or max label, the separator between them, and their font and colour. The same font and colour are used for the units next to the reading.

Range bar — whether the bar is shown, plus the colours of its track, of the fill up to the average, and of 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 — the card and a chart beside it show the same number. 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.

Statistics cover only the readings inside the window. The stretch before the first reading is not counted, because its value is unknowable. A device that stops reporting keeps its last reading on the card until the window moves past it.

Range bar

The bar is normalised to the window, not to an absolute 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 above its own average. When every reading in the window is identical, the bar is drawn full.

Empty state

When the window holds no numeric readings, the card shows No readings in this period instead of a value, and hides the bar and statistics.

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.