LCD bar gauge
Preconfigured gauge to display any value reading as a bar. Allows to configure value range, gradient colors, and other settings.
Who it’s for
Anyone building an instrument-style panel that needs a vertical readout — a level, a temperature column, a load bar in a stack of them, on a dark control-room or machine dashboard where the look is a lit segmented display.
What it does
The LCD bar gauge draws a reading as a segmented vertical bar on a dark face. Filling from the bottom over the default 0–100 range in narrow stripes, with the value and a unit caption printed alongside, it reads as a physical column display rather than as a chart bar.
- A vertical column matches what is being measured — level, height, fill and temperature all rise, and a vertical readout matches the reader’s mental picture.
- Segmented fill gives the lit-display look that distinguishes this preset from a plain vertical bar.
- Narrow footprint — the 2×3.5 tile is built to be repeated in a row of columns.
- The bar color can follow the value through a set of levels, so a column near its limit changes character.
- Minimum and maximum are printed at the bar’s ends, keeping the scale explicit.
- 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 LCD bar gauge shows one current reading: it is a styling preset of the same gauge engine, not a different instrument.
How to set up
Data keys
The LCD bar gauge takes one datasource, one entity and one data key.
| Key | Role | Type | Description |
|---|---|---|---|
| Any numeric key | The value the bar 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 bottom of the bar |
| Max value | 100 | The top of the bar; must be greater than the minimum |
| Units title | On, empty | Caption beside the value; set it to the unit being shown |
| Thickness of the stripes | 1.5 | Segment width; 0 turns the stripes off and makes the fill solid |
How to customize
- To caption the column — set Units title text, which ships enabled but empty.
- To match the scale to your equipment — set Min value and Max value to the real physical range.
- To change how segmented the bar looks — adjust Thickness of the stripes, or set it to
0for a solid column. - To make the column change color near a limit — set the Bar color levels.
- To fit a light dashboard — set Gauge bar background and the text colors to suit a pale background.
- To make the bar heavier or lighter — adjust Relative bar width.
- To mark a limit on the scale — turn on Ticks and add the values that matter.
- To change the gauge’s shape — set Type to Arc, Donut, Horizontal bar or Vertical bar.
Tips
- Give every column in a row the same range and the same color levels. A row of vertical bars is read by comparing heights, and per-column scales make that comparison silently wrong.
- Use ticks rather than color alone when a column has an operating band rather than a ceiling. A tick at each end of the acceptable range shows both that the value is too low and that it is too high, which a single rising color ramp cannot.
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.