Mini gauge
Preconfigured gauge to display any value reading as a circle. Allows to configure value range, gradient colors, and other settings.
Who it’s for
Dashboard builders who want a ranged reading to sit as a small, soft indicator rather than as an instrument — a status dot with a scale behind it, repeated across a dense board where each tile is glanced at rather than studied.
What it does
The Mini gauge draws a reading as a rounded ring between a minimum and a maximum, with the value in the middle. The rounded cap is what distinguishes it from the other small gauges: the fill ends in a soft curve rather than a hard edge, which reads as an indicator rather than as a measuring instrument.
- Sized and styled for density — a 2×2 tile meant to appear many times on one board.
- The rounded cap softens the gauge visually, which suits dashboards where the gauges are context rather than the subject.
- Position within a range stays readable even at this size, with the value in the center.
- The ring color can follow the value through a set of levels, so an outlier tile stands out in a grid.
- 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 Mini gauge shows one current reading: it has no track behind the fill by default, so it shows position more than it shows remaining headroom.
How to set up
Data keys
The Mini gauge takes one datasource, one entity and one data key.
| Key | Role | Type | Description |
|---|---|---|---|
| Any numeric key | The value the ring fills to | Timeseries | Numeric only. An attribute works equally well. The key’s own units and decimals override the widget-level ones. |
Range
| Setting | Default | Effect |
|---|---|---|
| Min value | 0 | The ring’s empty end |
| Max value | 100 | The ring’s full end; must be greater than the minimum |
| Min and max label | On | Prints both end points |
| Rounded line cap | On | Rounds the end of the fill, which is what gives this preset its look |
How to customize
- To make the fill change color as the value rises — set the Bar color levels.
- To show remaining headroom — set a Gauge bar background, which draws the unfilled part of the ring instead of leaving it blank.
- To sharpen the look — turn off Rounded line cap, which turns this preset into a plain simple gauge.
- To change the gauge’s shape — set Type to Arc, Donut, Horizontal bar or Vertical bar.
- To recover space in a small tile — turn off Min and max label.
- To make the ring heavier or lighter — adjust Relative bar width.
- To rotate the ring’s opening — set Angle to start from.
Tips
- Add a gauge bar background when the tile is used to judge headroom rather than position. Without a track, a ring at 30% and a ring at 80% both look like an arc of color, and only the number distinguishes them.
- Keep captions off these tiles and put the naming in the widget title. At 2×2 the caption competes with the value, and a grid of mini gauges is read by position and color long before anything is read as text.
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.