Skip to content
Stand with Ukraine flag

State chart

  • Widget
  • v1.0.0
  • Sep 1, 2026
  • MIT license
  • v4.2+ | Built-in
State chart

Displays changes to the state of the entity over time. For example, online and offline.

Widget Type
  • Timeseries
Category
  • Charts & Graphs
Use Cases
  • Industrial Automation
  • Smart Building
  • Predictive Maintenance

Who it’s for

Anyone auditing something that is either one thing or another over time — a pump running or stopped, a device online or offline, a door open or closed. The question is not what the value is now but how long it has been in each state and when it changed.

What it does

The State chart draws a boolean or enumerated reading as a stepped line, holding each level until the next change. Two switch series render with Off mapped to 0 and On mapped to 1, stepping at the moment of each transition, so a run of two hours is a plateau two hours wide and a rapid cycle is a visible comb.

  • Steps, not slopes — the line holds its level between readings, which is the truth for a state and a fiction for a measurement.
  • States map raw values to labels, so a series reporting true and false is charted and tooltipped as On and Off rather than as 1 and 0.
  • Duration is read directly off the width of each plateau, which is the measurement people actually want from state data.
  • Several series stack up on one chart, making it possible to see whether one device’s change lines up with another’s.
  • Thresholds, comparison overlays and data zoom work as they do on the other time series charts.
  • The State chart plots states over time: it computes no uptime percentage and no transition count, which belong in a calculated field feeding a value card.

How to set up

Data keys

The State chart takes one stepped series per data key, from one or more datasources.

KeyRoleTypeDescription
Switch 1One stepped seriesTimeseriesTimeseries only. The raw values must be covered by the state mapping — anything unmapped has no level to step to.

States

SettingDefaultEffect
StatesOff = 0, On = 1Maps each raw value to a chart level and the label shown in the legend and tooltip

Define one state per value the key can report, in the order they should stack up the axis. A three-state series such as idle, running, fault works the same way — add a third state and give it its own level.

How to customize

  • To chart something other than on and off — edit States, adding one entry per value with the label operators use for it.
  • To change where a transition is drawn — set the key’s step type, which decides whether the step occurs at the start or the end of the interval.
  • To compare several devices — add a key per device and give each its own level range, so the traces sit in bands rather than on top of each other.
  • To show the moments of change — turn on points for that key, which marks each transition.
  • To mark a limit — add a Threshold from a constant, an attribute or another key.
  • To let readers inspect a period — leave Data zoom on.
  • To change what the tooltip reports — set its Trigger to Axis so every series is shown for the same moment, and configure the date and interval lines.

Tips

  • Match the step type to what the data means. With end, the chart says the state held until the next reading arrived, which is right for a device reporting on change; with start, it says the state began at the reading, which is right for a device polled on a schedule.
  • Give each device its own level band rather than sharing 0 and 1 across several keys. Overlaid identical steps are almost impossible to attribute, and a chart meant to show which device changed first ends up showing only that something did.

Share Your Widget with the Community

Built a custom widget? Export it as a JSON from ThingsBoard and publish it to the IoT Hub through a simple 4-step wizard (Upload, Listing, Readme, Review & Submit). Share it with thousands of ThingsBoard developers worldwide and get featured in the catalog.