Skip to content
Stand with Ukraine flag

Parallel coordinates chart

  • Widget
  • 15 installs
  • v1.0.0
  • Aug 17, 2026
  • MIT license
  • v4.2+
Parallel coordinates chart

Compares many entities across several measurements at once. Each data key becomes an axis and each entity a line crossing them, so the shape of the group is visible and the entities that break it stand out. Optionally highlights the entities that sit furthest from the group on any axis, colours the lines by the value on one axis, and drags a range on an axis to filter. Reads the latest value of each key, or its aggregate over the time window when the key carries one. Optional legend to hide entities.

Widget Type
  • Latest
Category
  • Charts & Graphs

Who it’s for

Anyone comparing a group of similar entities on several measurements at once — a fleet of pumps, a row of chillers, a batch of test units — and trying to answer “which of these is behaving differently from the rest?” A table of numbers makes that comparison one column at a time; this chart puts every entity’s whole profile on screen together, so a shape that breaks from the group is visible before you go looking for it.

What it does

Five pumps compared on six axes — suction pressure, discharge pressure, flow, motor current, bearing temperature and vibration — draw as five lines crossing six vertical axes. Four of the lines hug a similar path across every axis. The fifth runs noticeably higher on bearing temperature and vibration, and turning on outlier highlighting picks it out immediately without anyone having to scan six columns of numbers by eye.

  • One axis per data key, one line per entity — axes are drawn in the order the keys are configured, and each line crosses every axis in one continuous path.
  • Outlier highlighting compares every entity with the spread of the others on each axis and draws the ones that sit far outside it in a different color, fading the rest.
  • Three ways to color the lines — one color per entity from a built-in palette, a single color for every line, or a gradient driven by the value on one axis, so color itself can carry a second measurement.
  • Filter by dragging a range on any axis to keep only the lines that pass through it; drag the range away to clear it.
  • A legend that hides entities — click an entry to remove that entity’s line from the chart, useful once a dozen or more are drawn.
  • Reads both telemetry and attributes, so a live reading can sit on the same chart as a rated or design value for comparison.
  • Every entity needs a value on every remaining axis to be drawn — a line with a gap on one axis would read as a different shape rather than as missing data, so an incomplete entity is left off the chart entirely rather than shown with a break in it.

How to set up

Data keys

Any numeric key, from two upward. Each key becomes one axis, drawn in the order the keys appear in the datasource.

KeyRoleTypeDescription
any keyAxisAttribute or TimeseriesThe latest reported value becomes the entity’s position on that axis; non-numeric values are ignored

A key with no value on any entity yet is dropped as an axis, and a footnote names it. An entity that is missing a value on one of the remaining axes is left off the chart entirely, and the footnote counts it. Four to six keys read best on a typical card; above seven, the axis names start to be truncated.

How to customize

Axes

  • Stack the axes horizontally instead of drawing them side by side — set Axis direction to “Horizontal axes, stacked” (the default, “Vertical axes, side by side”, is the familiar parallel-coordinates look).
  • More or less headroom above and below the data — Space above and below the extreme values, as a percentage of each axis’s span.
  • Keep the scale steady — Keep the axis ends on round numbers, so the range only moves once a new reading actually leaves it, instead of shifting on every update.
  • More or fewer tick marks — Ticks per axis.
  • Axis name color and size, tick label color and size — Axis name colour, Axis name size, Tick label colour, Tick label size.
  • Axis line color — Axis line colour.

Lines and colors

  • How the lines are colored — Colour the lines by: one color per entity, a single color, or the value on one axis.
  • Which built-in palette — Palette (Default, Cool, Warm, Monochrome), used with “one color per entity.”
  • A single line color for every entity — Line colour, used with “a single colour.”
  • Which axis drives a gradient — Axis that drives the colour (a data key name or label; leave it empty and the last axis is used), plus its low, middle and high colors and whether the color scale is shown on the chart.
  • Thicker or thinner, more or less see-through lines — Line width, Line opacity (lower values keep a crowded chart readable).
  • Curve the lines between axes instead of drawing them straight.

Outliers

  • Turn on outlier highlighting — Highlight entities that stand apart from the group (off by default).
  • How far counts as an outlier — Mark an entity from this far outside the group, in standard deviations; the default of 2 marks roughly the furthest 5% of a normal group, 3 the furthest 0.3%. An axis every entity agrees on has no spread and marks nobody.
  • The outlier color, and how far the rest fade — Colour of a marked entity, Fade the unmarked entities to.

Legend

  • Show a legend of entities — off by default, and hidden automatically above 60 entities, where a legend stops being readable.
  • Where it sits — Legend position: bottom, top, left or right.
  • Its font and text color — Legend font, Legend text colour.

Tooltip

  • Turn the tooltip on or off — on by default; it appears on hover and lists the entity with every axis value and its units.
  • Its font, text color and background — Tooltip font, Tooltip text colour, Tooltip background.

Tips

  • The chart draws with ECharts, which is declared as a widget resource and loads automatically — there’s nothing to install. If it can’t be reached, the card says so instead of rendering empty.
  • If you ever edit this widget’s settings as raw JSON rather than through the panel, note that Axis direction’s two choices are named by the layout you’ll see, not by their stored values — “Vertical axes, side by side” is stored as horizontal, and “Horizontal axes, stacked” is stored as vertical. The dropdown itself is unambiguous; only hand-edited JSON can trip over this.
  • A key can carry its own aggregate over the time window instead of a plain latest value — set that on the data key itself, not here, and its result appears on the axis the same way a latest reading would.

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.