Bar chart
Displays changes to time series data over time—for example, temperature or humidity readings.
Who it’s for
Anyone reading a quantity per period rather than a level — energy consumed per hour, units produced per shift, alarms raised per day. Bars carry the idea that each value belongs to an interval and that the intervals are comparable, which a line drawn through the same numbers quietly denies.
What it does
The Bar chart plots each data key as bars over time, one bar per aggregation interval. Two series render as grouped bars on a shared time axis, with thresholds available to mark a target and stack mode available to read a total and its composition at once.
- Each bar is a period, not a moment — the shape matches how consumption and production data are actually reported.
- Stack mode piles series that share a unit, so a total and its breakdown are read from the same chart.
- Several Y axes, each with its own units, decimals and scale, let a count and a rate share the chart.
- Threshold lines mark a target or a limit, taken from a constant, an attribute or another key.
- A comparison overlay draws the previous interval, or the same window a day, week, month or year ago, which is how a consumption chart earns its meaning.
- Data zoom lets a reader select a period without disturbing the dashboard’s time window.
- The Bar chart prints no figures on the bars: for a chart people will read numbers off, use Bar chart with labels.
How to set up
Data keys
The Bar chart takes one bar series per data key, from one or more datasources.
| Key | Role | Type | Description |
|---|---|---|---|
First | One bar series across the time window | Timeseries | Timeseries only. Each key’s settings carry its bar styling and its Y axis; a key can also be switched to a line or points if one series belongs on a different shape. |
Bars come from the dashboard’s aggregation, so the aggregation interval decides what one bar means. A chart captioned as daily consumption is a daily aggregation — the same keys drawn raw produce a bar per reading, which is a different chart entirely.
How to customize
- To read a total and its parts at once — turn on Stack mode; the stacked series must share a unit.
- To restyle the bars — set each key’s bar settings, including border and corner treatment.
- To stop one series flattening another — add a Y axis with the second series’ units and assign the key to it.
- To mark a target — add a Threshold from a constant, an attribute or another key.
- To compare against a previous period — turn on Comparison and choose the interval.
- To control bar width when there is no aggregation — use the no-aggregation bar width settings, which keep raw data from rendering as hairlines.
- To change what the tooltip reports — set its Trigger to Axis so hovering shows every series for that interval, and turn on the stacked total when stacking.
- To hide empty intervals from the tooltip — turn on Hide zero values.
Tips
- Set the aggregation interval deliberately and name it in the widget title. A bar chart’s entire meaning is “how much per interval”, and it is the one thing the chart itself does not state.
- Use Axis tooltip trigger on grouped bars. With the point trigger a reader has to hover each bar in turn to compare the series, which is the comparison the grouping was meant to make immediate.
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.