Horizontal bar

Who it’s for

Anyone showing a ranged reading in a wide tile on a light dashboard — a completion percentage, a level, a load against capacity, laid out as a bar rather than as a dial because bars stack and dials do not.

What it does

The Horizontal bar draws a reading as a filled bar between a minimum and a maximum, left to right, on a light track. At the default 0–100 range a value of 62 fills just under two thirds of the 7×3 tile, with the value, a label and both end points printed.

• Position within a range read as length, which is easier to compare across several tiles than an angle is.
• A wide tile suits a value that sits alongside a caption rather than in the middle of a dial.
• The bar color can follow the value through a set of levels, so an approaching limit changes the tile’s appearance.
• Minimum and maximum are printed at the bar’s ends, keeping the scale honest.
• Tick marks can be added at the values that matter, marking a target on the bar itself.
• 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 Horizontal bar shows one current reading: it plots no history, and it is a shape preset of the same gauge engine as the Gauge.

How to set up

Data keys

The Horizontal bar 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 left end of the bar
Max value	100	The right end; must be greater than the minimum
Min and max label	On	Prints both end points
Label	On	The caption above the value

Set the range to what the equipment can actually do — the bar’s whole meaning is the fraction of that range in use.

How to customize

• To make the fill change color as the value rises — set the Bar color levels.
• To mark a target on the bar — turn on Ticks and add the tick values, then set their width and color.
• To name the measurement — set the Label text, or turn on Units title for the unit.
• To show how fresh the reading is — turn on Timestamp and pick a format.
• To make the bar heavier or lighter — adjust Relative bar width, and turn on Rounded line cap for softer ends.
• To change the empty track — set Gauge bar background to suit a light or dark dashboard.
• To change the gauge’s shape — set Type to Arc, Donut, Horizontal bar or Vertical bar.
• To animate the fill — turn on Animation and set its duration and easing rule.

Tips

• Choose a bar over a dial whenever several of these will sit on one dashboard. Bars share a left edge, so a stack of them is scanned in one pass; a grid of dials has to be read one at a time.
• Put a tick at the value that triggers action and let the color ramp be secondary. A tick is a precise mark on the scale, whereas a color boundary is judged by eye and is easy to misplace by several percent.