Bars
Displays the latest values of the attributes or time series data in a bar chart. Supports numeric values only.
Who it’s for
Anyone comparing several current readings against each other — output per generator, occupancy per floor, throughput per line. Bars answer “which is highest and by how much” more precisely than a pie does, because length is easier to judge than angle.
What it does
The Bars chart draws one bar per data key, sized by that key’s latest value. Three keys reading Wind = 40, Solar = 35 and Hydroelectric = 25 render as three labelled bars on a shared axis, so the gaps between them are read directly rather than estimated.
- One bar per key — a comparison across measurements at this moment, which is a different question from how one measurement changed over time.
- A shared axis makes differences quantitative, and the axis range can be pinned so a chart does not rescale itself every time a value moves.
- Bar appearance is configurable in its own right, so a chart can be styled to match the rest of a dashboard rather than left at defaults.
- The legend can show each series’ total, giving the underlying numbers without hovering.
- Tooltips report values or percentages with their own decimals.
- Bar order can be fixed by label, keeping colors stable when a key is added later.
- The Bars chart plots the latest value only: a bar chart over time belongs on the Bar chart or Bar chart with labels widget.
How to set up
Data keys
The Bars chart takes one bar per data key, from one or more datasources.
| Key | Role | Type | Description |
|---|---|---|---|
Wind | One bar, sized by its latest value | Timeseries | Numeric values only. Attributes work equally well. Add one key per bar; the key’s label captions the bar and its legend row. |
Keys should share a unit, since they share an axis. Unlike a pie, negative values are fine here and are drawn below the baseline.
How to customize
- To stop the axis rescaling as values move — set the axis Scale min and max instead of leaving them on Auto, which keeps bar heights comparable between glances.
- To restyle the bars — use Bar appearance to set how the bars themselves are drawn.
- To make the axis readable on a dark background — set the axis tick label font and color.
- To show the underlying numbers — turn on Legend and Show total value, and style its label and value text.
- To report percentages on hover — set the tooltip’s value type accordingly, with the decimals the reader needs.
- To keep bar order stable — turn on Sort series by label, so adding a key later does not reshuffle the chart.
- To position the legend — set its Position to sit above, below or beside the chart.
Tips
- Pin the axis maximum to the highest value the system can produce rather than letting it auto-scale. An auto-scaled chart always looks full, so a plant running at 20% and one running at 95% produce the same picture until someone reads the axis.
- Reach for bars rather than a pie whenever the reader has to judge a difference rather than a share. Comparing 34% against 31% is guesswork on a pie and obvious on a bar chart.
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.