XY Scatter Chart

XY Scatter chart

Plot one telemetry key against another to reveal correlations, not just trends over time. Each point pairs an X sample with the Y sample that shares its timestamp, so you can see relationships like power vs irradiance, current vs voltage, or pressure vs flow — and spot points that fall off the expected line.

Features

• True X-Y scatter: both axes are data keys (unlike the built-in Point Chart, which plots value vs time)
• Timestamp pairing of X and Y, with an optional tolerance when the two keys arrive in separate messages
• Per-axis configuration: title, unit, decimals, linear or logarithmic scale, min/max, grid, invert, and color
• Optional least-squares trend line
• Color points by time (oldest → newest gradient)
• Zoom and pan (scroll + drag) on both axes
• Customizable tooltip: point-hover or crosshair, per-key color dots, units, and sample time
• Built on ECharts

Data keys

Attach two timeseries keys (max 2). Each key’s role and appearance are set in the data key settings:

• Plot on axis — Auto / X axis / Y axis. With both on Auto, the first key is X and the second is Y. Assigning both keys to the same axis shows a prompt instead of a chart.
• Axis title — taken from the key’s Label.
• Unit and Decimals — taken from the key’s native Units and Decimals fields (used on the axis and in the tooltip).
• Color — the key’s native color is used for its tooltip dot (and, for the Y key, as the default point color).

Both keys should be reported together (same timestamp) for exact pairing. If they are sent separately, set a pairing tolerance (see below).

Example

Solar performance — X = irradiance (W/m²), Y = power (kW), sent together:

{"ts":1785830400000,"values":{"irradiance":470,"power":2.3}}
{"ts":1785837600000,"values":{"irradiance":860,"power":4.2}}
{"ts":1785844800000,"values":{"irradiance":910,"power":2.6}}

The last sample (high irradiance, low power) sits well below the trend — a clear soiling/shading anomaly.

Configuration

• Data → Pairing tolerance (ms) — 0 pairs only identical timestamps; >0 matches X to the nearest Y within that many ms.
• Data → Max points — cap on rendered points (keeps the newest) to protect performance on wide windows.
• X axis / Y axis — show title, axis color, linear/log scale, min, max, approximate grid divisions, start-at-zero, grid lines, invert.
• Points — size, color, opacity, and color-by-time.
• Trend & zoom — trend line and its color, zoom/pan on or off.
• Tooltip — show/hide, trigger (point hover or crosshair), show units, show sample time.

The time window comes from the dashboard timewindow (this is a time-series widget).

Requirements

Requires the ECharts library. If your ThingsBoard instance does not expose a global echarts, add it on the widget Resources tab, e.g. https://cdnjs.cloudflare.com/ajax/libs/echarts/5.5.0/echarts.min.js. If it is missing, the widget shows a notice instead of a chart.

Tips

• For a logarithmic axis, remember that zero and negative values are not plotted.
• If the chart says no points share a timestamp, either enable a pairing tolerance or make the device report both keys in one message.