Snapshot Bar Chart

Who it’s for

Operators who watch several telemetry keys on one device and need to answer “what did this thing look like at 03:40?” rather than “how has it trended all week”. A line chart with five overlapping series answers the second question and hides the first: to compare battery against fuel level at one instant you have to read five lines at one x position. This widget turns that instant into bars, and lets you walk the instant forward through the time window while the bars re-rank in front of you.

What it does

At the selected moment every configured key is drawn as a bar on a shared axis, so the tallest and the shortest are obvious before any number is read. Click a row in the table below the chart, click or drag the timeline, or press play and watch the moment advance one reading at a time — the chart, the timeline marker and the highlighted table row always show the same instant.

• One bar per timeseries key, showing the reading nearest the selected moment — not an interpolation
• Timeline built from the union of every key’s timestamps, so a key that reports rarely does not shorten it and one that reports often is not lost
• Play, pause and optional loop; a sort button that re-ranks the bars by value
• A Latest / Pinned badge — while nothing is pinned the widget follows the newest reading, and clicking the badge returns to following it
• Threshold lines from a constant, or from the last value of a latest-data key
• Tooltips on bars, thresholds and timeline points, carrying the colour the bar was painted with
• The embedded timeseries table doubles as the row picker: hovering previews a moment, clicking pins it, and the platform’s own column picker also filters which bars are drawn
• Multiple entities appear as tabs; switching tabs resets the selection to that entity’s latest reading
• All keys share one Y axis, so keys of very different magnitudes flatten each other — see Tips

How to set up

Add the widget to a dashboard, point it at one entity, and add the numeric keys you want to compare as timeseries keys. Nothing else is required; every setting has a working default.

Data keys

Key	Role	Type	Description
Any numeric key (user-configured, one or more)	One bar each	Timeseries	The value at the selected moment. Units and decimals are taken from the key’s own settings, and the key’s colour is the bar’s colour by default.
Any numeric key (user-configured, optional)	Threshold line	Attribute or Timeseries, added as a latest key	Its last value becomes a horizontal line. Name it under Threshold lines → From the last value of a key.

A key that has not reported inside the time window contributes no bar rather than a zero bar. If no key has reported, the chart shows an empty state and the timeline disappears instead of rendering an axis with nothing on it.

How to customize

• To give the chart more or less of the card — change Chart height. The table takes whatever is left below the timeline.
• To control what happens on a short card — set When the card is too short: shrink the chart and then drop the table (the default), keep every part usable and scroll the card, or squeeze everything in. Drop the table below this much room is the threshold, 170px by default.
• To colour the bars by value instead of by key — set Bar colour to Blue to red by value, or to One colour for every bar and pick the colour.
• To read the numbers off the chart — turn on Value above each bar. A bar too tall to leave room above it gets its label inside the fill instead.
• To stop the axis rescaling as values move — set Y-axis min and Y-axis max. Leaving them empty auto-scales to the data and to any visible threshold line.
• To rank the bars from the start — set Sort bars to largest or smallest first. The toolbar button cycles the same three states at runtime.
• To change how timestamps read — set Time format. Automatic follows the time window; any other choice also restates the table’s time column, so the whole card reads consistently. Choose Custom pattern for something like dd.MM.yyyy | HH:mm.
• To make playback slower or faster — change Play speed, and turn on Start over at the end to loop.
• To add a limit line — add an entry under Threshold lines → Constant value with a value, a label, a colour and a unit. Untick Visible to park a line without deleting it.
• To match your dashboard’s palette — set Accent (play button, hovered row) and Selection (the pinned moment, the timeline handle, the highlighted row).
• To show the chart on its own — turn off Show the data table, and Timeline and play button if you do not need to move through time either.

Tips

• With keys of very different magnitudes — pressure in hPa next to drift in mm — the small bars flatten out, because every key shares one axis. Either set Y-axis min/max to focus on one band, or use the table’s column picker to hide the outlier; the bars follow the picker.
• Past roughly 13px between readings the timeline stops drawing a dot per reading and becomes a scrubber you can drag. Dragging stops playback on the first move, so use the play button for an even walk and the drag for hunting a specific moment.
• Set decimals on the data keys, not here. The bars, the tooltip and the table all read them from there, so 47.58888888888889 becomes 47.6 everywhere at once.
• When a short card drops the table, a button appears in the toolbar that switches that copy to scrolling. It is per-session and does not change the dashboard, so it is a safe way to reach the table on a laptop without editing the layout.