Simple neon gauge
Preconfigured gauge to display any value reading as a doughnut. Allows to configure value range, gradient colors, and other settings.
Who it’s for
Dashboard builders who want the glowing look in a small tile — a compact ring on a dark board, repeated across a wall display, where a full-width neon arc would take more space than the reading deserves.
What it does
The Simple neon gauge draws a reading as a glowing segmented ring in a 3×3 tile. The bar occupies the full relative width, glowing at moderate intensity over the default 0–100 range, with the value in the center and smooth animation between readings.
- A compact glowing indicator — enough presence to be seen at distance, small enough to repeat across a board.
- The full-width ring makes the glow the dominant element, which is what keeps it legible at this size.
- Animated movement is on by default, so a change is noticed.
- The ring color can follow the value through a set of levels, so the halo changes near a limit.
- Minimum and maximum stay printed even at this size.
- 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 Simple neon gauge shows one current reading: it is a styling preset of the same gauge engine as the plain Simple gauge.
How to set up
Data keys
The Simple neon 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 |
| Neon glow effect brightness | 40 | Halo intensity from 0 to 100; 0 disables the effect |
| Relative bar width | 1 | Full width, which is what makes the glow dominate at this size |
How to customize
- To tune the glow — set Neon glow effect brightness; lower it if the halo starts to swallow the value at this tile size.
- To make the halo change color near a limit — set the Bar color levels.
- To thin the ring — reduce Relative bar width, which leaves more room for the value in the center.
- To change how the value moves — set the Animation duration and easing rule, or turn animation off.
- To match the scale to your equipment — set Min value and Max value.
- To recover space in a small tile — turn off Min and max label.
- To change the gauge’s shape — set Type to Arc, Donut, Horizontal bar or Vertical bar.
Tips
- Reduce the bar width before reducing the glow when the center gets crowded. A thinner ring keeps the effect that justifies choosing this preset, while a dimmed glow on a full-width ring just looks like a muddy simple gauge.
- Keep the glow brightness identical across a board of these. Varying intensity reads as varying importance, which is a signal worth spending deliberately rather than by accident.
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.