Period Comparison Chart

Who it’s for

Dashboard builders, energy managers, and operators use this chart when the real question is how a period compares to the last one, not just what the current numbers are. They ask things like “is energy consumption up or down versus last week?”, “did yesterday’s shift use more power than the same shift last month?”, or “how does this month look year-over-year?”

What it does

A chart plotting powerConsumption for this week against the previous week might show this week’s line at 480 kWh on Tuesday against 410 kWh on the same weekday last week — hovering reports a +70 kWh, +17% delta the moment you check.

• Overlays a dimmed comparison series for each selected key, showing the same time range shifted to the previous day, week, month, year, or a custom date range.
• Comparison series are time-aligned onto the current x-axis, so both periods sit side by side for a direct visual comparison.
• One tooltip covers every selected key, showing the current value, the previous-period value, and the delta — both absolute and percent — together.
• A toolbar key picker lets viewers choose which telemetry keys to plot, up to a configurable maximum, without opening the dashboard editor.
• Compares one entity’s own history against itself; it does not compare two different entities side by side.

How to set up

Data keys

Add the widget to a dashboard state and assign one entity as its data source.

Key	Role	Type	Description
Telemetry keys (user-configured, one or more)	Plotted series	Timeseries	Every key added becomes selectable in the widget’s own Keys dropdown at runtime

The widget works as soon as one key is added: it renders as a line chart, compares to the previous day, and auto-selects the first key. With no keys added, there’s nothing to plot or compare.

Comparison period

Setting	Default	Effect
Default comparison period	Previous day	Sets which historical range the comparison series fetches when the widget first loads: previous day, week, month, year, or a custom date range
Period options	All periods	Limits which comparison periods appear in the toolbar’s “Compare to” dropdown — remove any you don’t want viewers fetching

How to customize

Chart type and series

• To switch to a bar chart — set Default chart type to Bar (Chart group).
• To show data point markers on the line — enable Show dots (line charts only).
• To smooth the line between points — enable Smooth line (line charts only).
• To change how comparison lines are drawn — use Comparison line style (line charts) or Bar border style (bar charts).
• To make the comparison series stand out less or more — adjust Comparison series opacity.

Layout

• To hide the zoom slider — turn off Show zoom.
• To hide or reposition the legend — turn off Show legend, or set Legend position to Top, Bottom, Left, or Right.
• To change axis label styling — adjust Axis font.

Tooltip

• To color deltas green/red by direction — set Delta color meaning to “Increase is good” or “Increase is bad”.
• To change the tooltip’s date format — pick a pattern from Tooltip date format.
• To restyle the tooltip — use the font and color settings under the Tooltip style group (date header, key name, and value fonts; label/current/previous colors).
• To show one row per series instead of a combined current/previous/delta view — turn off Show combined tooltip.

Key selection

• To pre-select which keys show on load — set Default selected keys to a comma-separated list of key labels.
• To allow more or fewer keys selected at once — change Max keys selectable at once.

Tips

• Add every key you might want to compare, even ones you don’t select by default — the toolbar’s Keys picker and Default selected keys both choose among keys you’ve already added, so nothing needs a trip back to the dashboard editor later.
• Keep Comparison series opacity low if viewers mainly need this period’s numbers at a glance — the dimmed series is meant to sit in the background, not compete with the current line.