XY Scatter Chart
Plot one telemetry key against another to reveal correlations, not just trends over time. Pick which key is X and which is Y per data key; points are paired by matching timestamps (with an optional tolerance when keys arrive separately). Rich per-axis config: title, unit, decimals, linear or log scale, min/max, grid, invert and color. Add a least-squares trend line, color points by time, zoom and pan, and a customizable tooltip. Built on ECharts. Great for solar, energy, HVAC and pump-curve analysis.
Who it’s for
Engineers looking for a relationship between two readings ask “does one of these move with the other, and which points don’t fit the pattern?” A time series chart shows each value against the clock, but that hides how current tracks voltage, how power tracks irradiance, or how flow tracks pressure. Plotting one against the other turns that relationship into a shape you can actually read, including the outliers that fall off it.
What it does
A solar array sends irradiance (W/m²) and power (kW) together: 470 → 2.3, 860 → 4.2, 910 → 2.6. The first two points sit on a rising line —
more sun, more power. The third breaks it: high irradiance, low power. That
point sits well below the trend line, a clear sign of panel soiling or
shading, something a time series chart of the same two keys would not make
obvious.
- True X-Y scatter, not value vs time — both axes come from data keys you choose, unlike the built-in Point Chart, which always plots a value against time
- Points paired by matching timestamp, with an optional tolerance for when the two keys arrive in separate messages instead of together
- Independent per-axis setup — title, unit, decimals, linear or log scale, min/max, grid, and color, each set separately for X and Y
- Optional least-squares trend line drawn straight through the points
- Color points by time, a gradient from the oldest sample to the newest, to see whether a relationship drifts across the window
- Zoom and pan on both axes, plus a tooltip you can switch between a single point and a crosshair
- Plots exactly one X-Y pair; it does not overlay more than two keys or compute a correlation coefficient — only the optional trend line
How to set up
Data keys
| Key | Role | Type | Description |
|---|---|---|---|
| X key (any name, user-configured) | X axis value | Timeseries | Required. Set Plot on axis to X axis in the key’s own settings, or leave it on Auto as the first of the two keys |
| Y key (any name, user-configured) | Y axis value | Timeseries | Required. Set Plot on axis to Y axis in the key’s own settings, or leave it on Auto as the second of the two keys |
The chart takes exactly two data keys, no more and no fewer. With both left on Plot on axis: Auto, the first key becomes X and the second becomes Y; assigning both keys to the same axis shows a message instead of a chart. Each axis’s title comes from that key’s own Label, and its unit and decimals come from the key’s own Units and Decimals fields.
Points are formed by matching an X sample to a Y sample with the same timestamp. If your device reports both values in one message, leave Pairing tolerance (ms) at 0 for exact matching. If X and Y arrive in separate messages, set a tolerance in milliseconds and the chart matches each X sample to the nearest Y sample within that window. Max points caps how many paired points are drawn, keeping the newest, to protect performance on a wide time window. If no samples share a timestamp, or none fall within the tolerance, the chart shows a message instead of an empty plot.
How to customize
Axes
- To hide an axis title — turn off Show axis title under X axis or Y axis. The title text always comes from that key’s Label.
- To recolor an axis — set Axis color under X axis or Y axis; it colors the line, ticks, labels, and title together.
- To switch to a logarithmic scale — set Scale to Logarithmic under X axis or Y axis. Zero and negative values don’t plot on a log scale.
- To fix the range instead of auto-fitting the data — set Min and/or Max under X axis or Y axis; leave either empty for automatic.
- To change how many gridlines are drawn — set Grid divisions (approx.) under X axis or Y axis. ECharts rounds to a nice interval, so the exact count can differ.
- To start an axis at zero instead of fitting tightly to the data — turn on Start at zero under X axis or Y axis.
- To hide grid lines or flip an axis’s direction — turn off Show grid lines, or turn on Invert axis, under X axis or Y axis.
Points
- To resize the points — set Point size.
- To recolor every point — set Point color. Empty uses the Y key’s own color, or blue.
- To make overlapping points easier to read — set Point opacity (0-1).
- To shade points from oldest to newest — turn on Color points by time; this overrides Point color with a gradient.
Trend line & zoom
- To add a least-squares trend line — turn on Show trend line, then set Trend line color.
- To turn off scroll-to-zoom and drag-to-pan — turn off Enable zoom / pan.
Tooltip
- To turn off the hover tooltip — turn off Show tooltip.
- To show a crosshair instead of a single point’s tooltip — set Trigger to Crosshair (axis).
- To drop units or the sample time from the tooltip — turn off Show units or Show sample time.
Tips
- On a logarithmic axis, remember that zero and negative values are never plotted.
- If the chart says no points share a timestamp, turn on a pairing tolerance, or have the device send both keys in the same message.
- Turn on Color points by time on a wide window to see whether a relationship — solar power versus irradiance, say — has drifted or degraded over time, not just where the cloud of points sits today.
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.