Skip to content
Stand with Ukraine flag

Line chart

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

Displays changes to time series data over time—for example, temperature or humidity readings.

Widget Type
  • Timeseries
Category
  • Charts & Graphs
Use Cases
  • Environment Monitoring
  • Smart Building
  • Industrial Automation

Who it’s for

Anyone watching a continuously varying measurement — temperature, humidity, pressure, flow. The reader is following a trace: where it is heading, how steady it is, and whether the last hour looks like the hour before it.

What it does

The Line chart plots each data key as a continuous line over time, with a soft fill beneath it. Two temperature series render as two traces on a shared time axis, filled at 40% opacity so overlapping lines stay distinguishable, with thresholds available to mark the limits either one must stay within.

  • Continuous readings read as shape — a line makes a slow drift, a step change and a noisy sensor look different, which separated points and bars do not.
  • The area under each line is filled by default, which keeps two crossing traces readable without needing the legend.
  • Several Y axes, each with its own units, decimals and scale, so unlike measurements can share a chart.
  • Threshold lines mark limits, taken from a constant, an attribute or another key, so the limit moves when the configuration does.
  • A comparison overlay draws the previous interval, or the same window a day, week, month or year ago.
  • Data zoom lets a reader select a period without disturbing the dashboard’s time window.
  • The Line chart is a preset of the Time series chart with its keys set to lines: switching a key to bars or points is a per-key setting rather than a different widget.

How to set up

Data keys

The Line chart takes one line per data key, from one or more datasources.

KeyRoleTypeDescription
FirstOne plotted lineTimeseriesTimeseries only — the chart plots history. Each key carries its own line width, style, smoothing, point markers and fill, and can be bound to its own Y axis.

Keys left on the default axis share one scale, which only makes sense when they share a unit. The chart follows the dashboard’s time window and aggregation, so a long window drawn from aggregated data is smoother than the same window drawn raw.

How to customize

  • To make a trace stand out — raise that key’s line width, or turn its fill off so a busier series sits behind it.
  • To smooth a noisy sensor visually — turn on smooth for that key, remembering it changes the drawing rather than the data.
  • To show the individual readings — turn on points for that key and set their shape and size.
  • To stop one series flattening another — add a Y axis with the second series’ units and assign the key to it.
  • To mark a limit — add a Threshold from a constant, an attribute or another key.
  • To compare against a previous period — turn on Comparison and choose the interval.
  • To let readers inspect a period — leave Data zoom on.
  • To change what the tooltip reports — set its Trigger to Point or Axis, and configure the date, the interval and zero-value hiding.

Tips

  • Turn the fill off once a chart carries more than about three lines. Overlapping translucent areas mix into colors that belong to no series, and at that point the fill is actively misleading rather than merely busy.
  • Be careful with smooth on data that has real steps. The curve interpolates between readings, so a valve that snapped shut is drawn as though it eased shut, which is exactly the detail an incident review is looking for.

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.