Skip to content
Stand with Ukraine flag

Bar chart with labels

  • Widget
  • v1.0.0
  • Sep 1, 2026
  • MIT license
  • v4.2+ | Built-in
Bar chart with labels

Displays changes to time series data over time visualized with value bars and labels — for example, daily water consumption for the last month.

Widget Type
  • Timeseries
Category
  • Charts & Graphs

Who it’s for

Anyone reporting a periodic total that people will quote — daily water consumption for the last month, energy per shift, units produced per day. The chart has to be read as numbers, not just as a shape, because the figures end up in a report or a conversation.

What it does

The Bar chart with labels plots time series data as bars over time and prints each bar’s value on the bar itself. A month of daily water consumption renders as thirty labelled bars, so a reader takes the number for the 14th straight off the chart instead of hovering over it.

  • Values are printed, not just plotted — the label on each bar removes the hover step, which matters on a screen someone is reading rather than driving.
  • Bar labels and bar values are styled separately, so the category caption and the figure can be weighted differently.
  • Several series can share the chart, grouped per interval, with a legend above by default.
  • Tooltips add the timestamp and the interval to the value, which distinguishes “the 14th” from “the interval starting on the 14th”.
  • The chart follows the dashboard’s time window and its aggregation interval, so the same configuration reports hourly or daily totals without being edited.
  • The Bar chart with labels is built for a readable number of intervals: a window producing hundreds of bars renders, but the labels that justify this widget stop fitting.

How to set up

Data keys

The Bar chart with labels takes one series per data key, from one or more datasources.

KeyRoleTypeDescription
HumidityOne bar series across the time windowTimeseriesTimeseries only — the chart plots history, so an attribute has nothing to draw. Add one key per series; the key’s label captions it in the legend and the tooltip.

The bars come from the dashboard’s aggregation, so set the time window and the aggregation interval to the period the chart is meant to report — a daily total chart is a daily aggregation, not a raw series drawn over a month. Keep the interval count low enough that the printed values still fit.

How to customize

  • To hide the printed figures and keep a plain bar chart — turn off Bar value; turn off Bar label to drop the captions under the bars.
  • To weight the figures against the captions — set Bar value and Bar label fonts and colors independently.
  • To move or drop the legend — set the legend Position, or turn Legend off on a single-series chart where it says nothing.
  • To change what the tooltip reports — turn off Show date or the interval line, and set the tooltip’s date format, fonts and colors.
  • To make tooltips readable over a busy chart — set the tooltip Background color and raise its Background blur.

Tips

  • Match the aggregation interval to the story rather than to the data. A month of readings aggregated daily gives thirty labelled bars that people can quote; the same month raw gives a wall of bars whose labels overlap into an unreadable band.
  • Turn the bar values off on any chart wider than about forty intervals and let the tooltip carry them. The labels are the reason to choose this widget, so once they stop fitting, the plain Bar chart is the more honest choice.

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.