Chart with marked alarms

Who it’s for

Anyone debugging or reviewing equipment behavior asks “did this reading actually trigger the alarm, or are they unrelated?” without flipping between a chart and a separate alarm log to find out. A maintenance engineer checks whether a temperature spike is what triggered last night’s Major alarm. A commissioning engineer watches a new sensor’s first hours of data next to the alarm thresholds while tuning them. Someone reviewing a shift’s charts wants every alarm plotted right where it happened, not listed in a table they have to cross-reference by timestamp.

What it does

Equipment temperature reads normally at 68.2, spikes to 91.5, then recovers to 74.0. A Major alarm that starts at the spike and clears the moment the reading drops back renders as an orange shaded band spanning exactly that window, so it is immediately visible that the alarm tracks the spike and clears as soon as the value recovers.

• Alarms are drawn directly on the chart — active (uncleared) alarms as dashed severity-colored lines, cleared alarms as shaded severity-colored bands from start to clear
• A small per-severity count panel in the corner of the chart shows how many alarms currently match the filter, without opening a separate alarm table
• Hovering the chart lists every alarm active at that point in time — type, severity, and start-to-clear (or “Active”) — alongside the usual series values, up to 10 series lines and 6 alarms at once before it switches to a “+N more” note
• Alarm filtering happens on the subscription itself, not just visually: by status, severity (each with its own color), an alarm type allow-list, and alarms propagated from child entities
• Toggling a series off in the legend keeps the overlay tied to whichever series remain visible; hiding every series hides the overlay too and shows an empty state
• Draws alarms on top of telemetry it already has; it does not raise, acknowledge, or clear alarms itself

Requirements

This widget loads its chart library, ECharts 6.1.0, from a resource it already carries on its own Resources tab (https://cdnjs.cloudflare.com/ajax/libs/echarts/6.1.0/echarts.min.js), so there is nothing to add for a normal install. If your ThingsBoard instance blocks external CDN resources, host that same file yourself and update the Resources tab entry.

How to set up

Data keys

Key	Role	Type	Description
Telemetry keys (any number, user-configured)	Plotted series	Timeseries	Each key becomes its own line — or a bar, if the key’s own Type setting is set to bar

Attach one or more timeseries keys on the Data tab; there is no fixed limit on how many lines the chart can show. Each key’s own Units and Decimals settings control what its tooltip line displays — a key with neither set shows its raw, unrounded value with no unit, since this chart has no fallback of its own for either. The Y-axis title is set once for the whole chart, under Y Axis → Axis title, not per key. Alarms are not a data key: they come from a separate live alarm subscription on the widget’s own entity (the first bound datasource), scoped by the alarm filter below.

Alarm filter

Setting	Default	Effect
Alarm status	Active, Cleared	Which statuses are included in the subscription — Acknowledged and Unacknowledged are also available
Alarm severity	All five severities	Which severities are included; excluding one here removes it from the chart, the tooltip, and the count panel
Alarm type list (comma-separated)	Blank — any type	An allow-list; blank matches every alarm type
Search propagated alarms	Off	Includes alarms propagated from child entities in the same subscription

These four settings scope the alarm subscription itself, not just what gets drawn — an alarm excluded here never reaches the chart, the tooltip, or the count panel. They live under Settings → Alarms, alongside the purely visual alarm settings covered in How to customize.

How to customize

Chart appearance

• To hide the legend or move it — turn off Show legend, or set Legend position to Bottom (only shown while the legend is on).
• To stop the lines from curving — turn off Smooth curve.
• To show “Time” above the x-axis — turn on Show axis title under X Axis (the label always reads “Time”; it isn’t custom text).
• To recolor an axis — adjust Axis color under X Axis or Y Axis.
• To add a y-axis title — set Axis title under Y Axis.
• To hide the horizontal grid lines — turn off Show grid lines under Y Axis.
• To show point markers on the lines — turn on Show points under Points, then set Point size, Point color (blank uses the key’s own color), Point opacity, and Color points by recency.
• To let viewers zoom and pan the chart — turn on Enable zoom / pan under Zoom.

Tooltip

• To hide the tooltip — turn off Show tooltip.
• To drop units or the sample time from it — turn off Show units or Show sample time.

Alarm appearance

• To change how thick the dashed active-alarm line looks — adjust Alarm line thickness (px); this is visual only, hover detection always uses a fixed radius regardless of this value.
• To make cleared-alarm bands stronger or fainter — adjust Marker area opacity (0-1).
• To hide the per-severity count panel — turn off Show alarm total panel.
• To recolor a severity — adjust its own color field (Critical color, Major color, Minor color, Warning color, Indeterminate color); each only appears while that severity is included under Alarm severity above.

Tips

• If the overlay seems to be missing, check Alarm status, Alarm severity, and Alarm type list first — these filter the subscription itself, so an excluded alarm never reaches the chart, the tooltip, or the count panel.
• For very short-lived alarms, raise Alarm line thickness or Marker area opacity so they don’t get lost against the data line.
• Alarms outside the current time window don’t render — this chart follows the dashboard’s own timewindow, so widen it to see older alarms.
• On a busy chart, the hover tooltip caps out at 10 series lines and 6 alarms, showing “+N more” beyond that — worth knowing before assuming an alarm or series was silently dropped.