Skip to content
Stand with Ukraine flag

LCD bar gauge

  • Widget
  • v1.0.0
  • Sep 1, 2026
  • MIT license
  • v4.2+ | Built-in
LCD bar gauge

Preconfigured gauge to display any value reading as a bar. Allows to configure value range, gradient colors, and other settings.

Widget Type
  • Latest
Category
  • Gauges & Indicators
Use Cases
  • Industrial Automation
  • Environment Monitoring

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.

KeyRoleTypeDescription
Any numeric keyThe value the bar fills toTimeseriesNumeric only. An attribute works equally well. The key’s own units and decimals override the widget-level ones.

Range

SettingDefaultEffect
Min value0The bottom of the bar
Max value100The top of the bar; must be greater than the minimum
Units titleOn, emptyCaption beside the value; set it to the unit being shown
Thickness of the stripes1.5Segment 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 0 for 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.