Bar Chart

• Multiple data series with independent colors and Y axis assignments.
• Real-time and history modes with configurable time window and data aggregation (average, sum, min, max, count).
• Comparison overlay: plot the same series from a previous period (yesterday, last week, etc.) alongside current data.
• Configurable thresholds as horizontal reference lines with labels and custom styles.
• Legend with per-series statistics: min, max, average, total, and latest.
• Bar width strategy for non-aggregated data: group bars side by side or render them separately.
• Data zoom for inspecting narrow time ranges without changing the dashboard time window.

1. Open the dashboard in edit mode. Click Add widget in the top toolbar, or click the Add new widget icon in the center of an empty dashboard.
2. In the widget bundle selection dialog, find and click Charts.
3. Select the Bar chart widget.
4. Configure the datasource, series, and appearance, then click Add.

All settings in this section use Basic mode — a quick-start configuration covering the essentials. For finer widget controls like custom tooltip functions and advanced axis formatting, switch to the Advanced tab.

The Basic tab groups settings into: Time window, Datasource, Series, Y axes, Thresholds, Appearance, Chart, X axis, Bar width strategy for non-aggregated data, Legend, Tooltip, Animation, and Card appearance.

Define the time interval to display, like Last 7 days or Current month. Enable data aggregation to summarize values over specific intervals, like daily sums. Learn more in the Time window guide.

Select the source of telemetry data:

• Device — a specific device; shows telemetry series from this device over the configured time range.
• Entity alias — a set of entities matched by an entity alias; use this to compare metrics from multiple devices on the same chart.

The widget supports two display modes: Series and Comparison.

Each data key is rendered as an independent bar series. Add a key for each telemetry value to display, like energyConsumed or temperature. Each series updates dynamically as new telemetry arrives.

Click the settings icon on a series row to open the Data key configuration dialog with General and Advanced tabs.

General tab:

Setting	Description
Key	Telemetry or attribute key name.
Label	Legend label for this series.
Units	Unit suffix, like kWh or °C.
Decimals	Decimal places for displayed values.
Color	Bar color.
Use data post-processing function	Optional JavaScript transform applied to the raw value before display. Signature: f(value, latestData).

Advanced tab — Legend:

Setting	Description
Show in legend	Include this series in the chart legend.
Hidden by default	Series is rendered but hidden in the legend until toggled by the user.

Advanced tab — Y axis: Select which Y axis this series is plotted against.

Advanced tab — Tooltip value format function: Optional JavaScript function f(value, latestData) to format the value shown in the hover tooltip for this series.

Advanced tab — Comparison settings: Enable Show historical data for comparison to plot a comparison bar series from a previous time period alongside this series. Configure Comparison key label (auto or custom) and Comparison data color.

In Comparison mode, the widget overlays the same data keys from a previous time period on top of the current data — for example, this week vs. last week or today vs. yesterday. Each period is rendered as a separate bar series, making it easy to spot trends or anomalies across intervals.

Switch to the Comparison tab in the Series section to enable this mode. Each comparison entry has an interval dropdown, an X axis button, and a list of data keys (Show, Key, Label, Color).

Comparison interval options:

Option	Description
Previous interval (default)	Shifts the time window back by one full interval length.
Day ago	Compares with the same period from 24 hours earlier.
Week ago	Compares with the same period from 7 days earlier.
Month ago	Compares with the same period from one month earlier.
Year ago	Compares with the same period from one year earlier.
Custom interval	Enter a custom offset in milliseconds.

Comparison X axis settings — click the X axis button to configure how the comparison time axis is displayed:

Setting	Description
Show	Display the comparison X axis on the chart.
Label	Text label for the comparison axis.
Position	Top or Bottom.
Tick labels	Show date/time labels on ticks. Configure font and color.
Show ticks	Render tick marks on the axis.
Show line	Render the axis baseline.
Show split lines	Render vertical grid lines for each tick.

Configure one or more Y axes to control vertical scaling and labeling. Each series can be assigned to a different axis via its Y axis field in the series settings. Click Add Y axis to add a new axis.

Each axis row shows the following columns:

Column	Description
Id	Unique identifier used to assign series to this axis.
Show	Toggle axis visibility on the chart.
Label	Text label shown next to the axis.
Position	Left or Right.
Min / Max	Fixed scale bounds. Leave empty for auto-scaling.
Units	Unit suffix for axis tick labels.
Decimals	Decimal places for tick label values.

Click the settings icon on an axis row to open the Y axis settings dialog:

Setting	Description
Label	Text label with configurable font and color.
Tick labels	Show value labels on each tick. Configure font and color.
Show ticks	Render tick marks on the axis line.
Show line	Render the axis baseline.
Show split lines	Render horizontal grid lines across the chart for each tick.
Ticks interval	Interval between ticks. Auto derives it from the data range.
Split number	Suggested number of tick intervals. Auto lets the chart decide.

Scale limits — set explicit minimum and maximum bounds for the axis scale. Each bound has a Source:

Source	Description
Constant	Fixed numeric value entered directly.
Key	Value taken from a telemetry or attribute key of the current entity.
Entity	Value taken from a specified entity’s attribute or telemetry key.

Add horizontal reference lines to mark safe, warning, or critical levels. Click Add threshold to add a row.

Column	Description
Source	Constant — a fixed numeric value. Entity — value pulled from an entity attribute or telemetry key.
Key / Value	The numeric value (Constant) or the attribute/telemetry key name (Entity).
Y axis	Which Y axis the threshold is drawn against.
Color	Threshold line color.
Units	Unit suffix displayed in the threshold label.
Decimals	Decimal places for the threshold label value.

Click the settings icon on a threshold row to open the Threshold settings dialog:

Setting	Description
Label	Toggle to show a text label on the threshold line. Set position: Start, Middle, End, Inside start, Inside start top, or Inside start bottom. Configure font and color.
Label background	Show a filled background behind the label text.
Line color	Color of the threshold line.
Line type	Dash style: Solid, Dashed, or Dotted.
Line width	Stroke width in pixels.
Start symbol	Marker at the left end of the line, like None or Arrow. Set symbol size.
End symbol	Marker at the right end of the line, like None or Arrow. Set symbol size.

Controls the chart title displayed in the widget header.

Setting	Description
Title	Text shown in the widget header. Configure font, size, weight, and color.
Card icon	Optional icon displayed next to the title.

Controls interactive behavior and chart area layout.

Setting	Description
Data zoom	Enable horizontal zoom for inspecting narrow time ranges without changing the dashboard time window.
Grid	Adjust padding inside the chart area.
Stack mode	Accumulate multiple series on the same axis, useful for showing contribution totals.

Configure the horizontal time axis. Use the Show toggle to hide the axis entirely.

Setting	Description
Label	Text label displayed along the axis. Configure font and color.
Position	Bottom or Top.
Tick labels	Show date/time labels on each tick. Configure date format, font, and color.
Show ticks	Render tick marks on the axis. Configure color.
Show line	Render the axis baseline. Configure color.
Show split lines	Render vertical grid lines across the chart for each tick.

Controls how bar series are rendered when no data aggregation is applied.

Option	Description
Group	Bars for different series are placed side by side at each timestamp.
Separate	Each series renders its bars independently, allowing overlap.

Use the master toggle to show or hide the legend entirely.

Setting	Description
Position	Legend placement: Top, Bottom, Left, or Right.
Show values	Statistics displayed per series: Min, Max, Average, Total, Latest. Multiple values can be enabled simultaneously.
Label	Font and color for series name labels.
Value	Font and color for statistic values.
Column title	Font and color for the column header row (visible when Show values is enabled).
Sort datakeys in legend	Sort series entries alphabetically.

Use the master toggle to show or hide the tooltip entirely.

Setting	Description
Trigger	Point — hover over a data point; Axis — hover anywhere on the chart shows values for all series at that timestamp.
Date	Toggle to show the timestamp. Select the date format and configure font and color.
Show date time interval	Display the time interval range in the tooltip header.
Hide zero values	Suppress series entries with a value of zero from the tooltip.
Show total value in stack mode	Show the summed total of all series when Stack mode is enabled.
Label	Font and color for series name labels in the tooltip.
Value	Font and color for value text in the tooltip.
Background color	Tooltip background fill color.
Background blur	Blur radius (px) applied to the tooltip background.

Use the master toggle to enable or disable chart animation. When enabled:

Setting	Description
Animation threshold	If the number of data points exceeds this value (default 2000), animation is disabled to maintain performance.
Animation duration	Duration of the initial load animation in milliseconds (default 500 ms).
Animation easing	Easing function for the initial animation, like cubicOut.
Animation delay	Delay before the initial animation starts, in milliseconds.
Update animation duration	Duration of the animation when data updates arrive (default 300 ms).
Update animation easing	Easing function for update animations.
Update animation delay	Delay before update animations start, in milliseconds.

Setting	Description
Background	Solid color or image background for the card.
Show card buttons	Enable Fullscreen and Data export toolbar buttons.
Card border radius	Corner rounding in pixels.
Card padding	Spacing between content and card border.

The Bar chart supports the Widget header button action — a button placed in the widget header that triggers a configured action when clicked.

Goal: Display daily energy consumption from a Smart Device on a bar chart for the last 7 days, aggregated as a daily sum.

Prerequisites: A device named Smart Device that sends energyConsumed (kWh) as a telemetry key.

Step 1. Add the widget. Open your dashboard in edit mode, click Add widget, select the Charts bundle, then choose Bar chart.

Step 2. Configure the time window. Set Period to Realtime — last 7 days, Aggregation to Sum, and Grouping interval to 1 day.

Step 3. Configure the datasource. Set Datasource type to Device, then select Smart Device.

Step 4. Add a series. In the Series section, add one data key:

Key	Label	Y axis	Color	Units	Decimals
energyConsumed	Energy Consumed	default	#4E79A7	kWh	1

Step 5. Configure Y axes. Set the default axis:

ID	Label	Position	Units	Decimals
default	Energy, kWh	Left	kWh	0

Step 6. Configure appearance and legend. In the Appearance section set Title to Daily Energy Consumption, font size 18 px, weight 600. In the Legend section set Position to Bottom and enable Total.

Step 7. Disable data zoom. In the Chart section, disable Data zoom.

Step 8. Save. Click Add, resize and reposition as needed, then click Save on the dashboard toolbar.

Result: The chart displays one blue bar per day representing the total energy consumed. The legend shows the cumulative total across all displayed days. The chart updates automatically as new telemetry arrives.

Widget Shows No Data

Cause	Solution
Wrong data key name	Confirm the key name matches the telemetry key sent by the device. Key names are case-sensitive.
Incorrect datasource or entity alias	Verify the correct Device or Entity alias is selected. Open Entity aliases to confirm the alias resolves to results.
Device not sending data	Open Devices → Latest telemetry and check for recent values. If empty, verify the device transport configuration and access token.
No telemetry in the selected time window	Extend the time range or switch to Realtime mode to confirm data exists.
Rule chain misconfiguration	Check that the Rule Chain has a Save time series node routing device telemetry to the database.
Datasource updated after import	After importing a widget, update the datasource to point to your device and update data key names to match your device’s actual telemetry keys.

Data Updates Stop or Show Partial Data

Cause	Solution
Time window type mismatch	Use Realtime for live monitoring, History for fixed date ranges.
Aggregation interval too large	Reduce the grouping interval, like from 1 month to 1 day, for finer granularity.
Browser time zone mismatch	Ensure the dashboard and device use the same time zone.

A Series Does Not Appear on the Chart

Cause	Solution
Data key not added	Open the Series section and confirm the telemetry key is added as a data key row.
Series hidden by default	Open the data key’s Advanced settings and disable Hidden by default.
Wrong Y axis assignment	Check that the series is assigned to an existing Y axis ID.