Chart with marked alarms

Chart with marked alarms

Plot one or more telemetry keys as a standard time-series chart, with the entity’s alarms drawn directly on top — so you can see at a glance whether a spike, dip, or plateau in the data lines up with an alarm, instead of cross-referencing a separate alarm log against the chart.

Features

• Alarm overlay directly on the time series: active (uncleared) alarms as dashed severity-colored lines, cleared alarms as shaded severity-colored bands from startTs to clearTs
• Alarm filtering on the subscription itself, not just visually — by status (Active, Cleared, Acknowledged, Unacknowledged), severity (each independently toggleable with its own color), an alarm type allow-list, and optional propagated alarms from child entities
• Hover tooltip lists every matching alarm at that point in time — type, severity, start → clear (or “Active”) — alongside the usual series values
• Legend-aware overlay: toggling a series off keeps the alarm overlay tied to whichever series remain visible; hiding all series hides the overlay and shows an empty state
• Smoothed lines with optional area fill, point markers (size, opacity, color-by-recency), zoom and pan
• Basic and Advanced configuration modes — a simplified Basic view for quick setup, and an Advanced view exposing every setting below
• Built on ECharts

Data keys

Attach one or more timeseries keys — there’s no fixed limit, unlike widgets that pair exactly two keys for correlation. Each key plots as its own line:

• Axis title (Y axis) — set once for the chart, not per key.
• Unit and Decimals — taken from each key’s native Units and Decimals fields where set; otherwise fall back to the chart-level units/decimals settings.
• Color — each key’s native color is used for its line, area fill, and tooltip dot. Alarms are not a data key — they come from a separate live alarm subscription on the widget’s entity (the first datasource), scoped by the Alarm filter settings below.

Example

Equipment temperature — key temperature reported normally, with a Major alarm raised when it crosses a threshold and cleared once it drops back:

{"ts":1785830400000,"values":{"temperature":68.2}}
{"ts":1785837600000,"values":{"temperature":91.5}}
{"ts":1785844800000,"values":{"temperature":74.0}}

An alarm with severity:"MAJOR", startTs:1785837600000, clearTs:1785844800000 renders as an orange shaded band spanning exactly that window — so it’s immediately visible that the alarm tracks the temperature spike and clears as soon as the value recovers.

Configuration

• General — show/hide legend and its position, smooth curves, area fill under each line.
• Data — fallback units and decimals for keys that don’t define their own.
• X axis / Y axis — show title, axis color, grid lines (Y axis also takes a title text).
• Points — show point markers, size, color override, opacity, color-by-time.
• Zoom — enable inside + slider zoom/pan on the X axis.
• Tooltip — show/hide, show units, show sample time.
• Alarm markers — line thickness for active-alarm markers (visual only — hover-detection uses a fixed pixel radius regardless of this value); shaded-area opacity for cleared-alarm bands.
• Alarm filter — status — include/exclude Active, Cleared, Acknowledged, Unacknowledged.
• Alarm filter — severity — include/exclude each of Critical, Major, Minor, Warning, Indeterminate; each shows its own color picker while included.
• Alarm filter — other — comma-separated alarm type allow-list (blank = any type); toggle to include alarms propagated from child entities. The time window comes from the dashboard timewindow (this is a time-series widget); alarms are matched to that same window.

Configuration modes

The widget opens in Advanced mode by default, exposing every setting listed above. A Basic mode is also available for quick setup when you just need to add series and go without touching every toggle.

Requirements

Requires the ECharts library, referenced on the widget’s Resources tab (bundled from cdnjs.cloudflare.com, e.g. https://cdnjs.cloudflare.com/ajax/libs/echarts/6.1.0/echarts.min.js). If your ThingsBoard instance blocks external CDN resources, host the same version locally and update the Resources tab entry.

Tips

• If the overlay seems to be missing, check the Alarm filter settings first — a status, severity, or type filter may be excluding the alarms you expect to see.
• For alarms that are very short-lived, increase the marker line thickness or the shaded-area opacity so they don’t get lost against the data line.
• Alarms outside the current dashboard time window won’t render — widen the window to see older alarms.