ztd chartsHome

Relationship · Advanced

Parallel coordinates

Several numeric metrics, each on its own axis, compared as one line per row.

Open in playground
Use when
Comparing 4 to 8 metrics at once, such as product specs
Avoid when
The audience sees it for the first time (it needs explaining)

Try it

31

Parallel coordinates

Laptop models compared
Parallel coordinatesParallel coordinates. 8 rows, 5 axes (Price (10k KRW), Weight (kg), Battery (h), Performance, Screen (in)).Air 13
Parallel coordinates data
Air 13Price (10k KRW) 159, Weight (kg) 1.2, Battery (h) 18, Performance 72, Screen (in) 13.6
Pro 14Price (10k KRW) 299, Weight (kg) 1.6, Battery (h) 17, Performance 91, Screen (in) 14.2
Ultra 16Price (10k KRW) 389, Weight (kg) 2.1, Battery (h) 14, Performance 97, Screen (in) 16.2
Slim 15Price (10k KRW) 189, Weight (kg) 1.5, Battery (h) 15, Performance 70, Screen (in) 15.3
Gaming 17Price (10k KRW) 329, Weight (kg) 2.8, Battery (h) 6, Performance 95, Screen (in) 17.3
Basic 14Price (10k KRW) 89, Weight (kg) 1.5, Battery (h) 10, Performance 48, Screen (in) 14
2-in-1 13Price (10k KRW) 179, Weight (kg) 1.3, Battery (h) 13, Performance 66, Screen (in) 13.3
Creator 16Price (10k KRW) 349, Weight (kg) 2, Battery (h) 12, Performance 93, Screen (in) 16
The Air 13 is light and cheapAdvanced

Hover over the chart, or Tab in and use the arrow keys to move between items. The numbers are sample data.

Variants

Named looks for this chart. Each one is the example above with a few options or fields changed. The CLI (ztd-charts example parallel --variant <id>) and the MCP server know the same names.

No flipped axes

Laptop models compared
Sample data

Code

ParallelCoordinates.tsx
import { ChartCard, ParallelCoordinates } from "ztd-charts";

const data = [
  {"model":"Air 13","price":159,"weight":1.24,"battery":18,"perf":72,"screen":13.6},
  {"model":"Pro 14","price":299,"weight":1.55,"battery":17,"perf":91,"screen":14.2},
  {"model":"Ultra 16","price":389,"weight":2.14,"battery":14,"perf":97,"screen":16.2},
  {"model":"Slim 15","price":189,"weight":1.51,"battery":15,"perf":70,"screen":15.3},
  {"model":"Gaming 17","price":329,"weight":2.8,"battery":6,"perf":95,"screen":17.3},
  {"model":"Basic 14","price":89,"weight":1.45,"battery":10,"perf":48,"screen":14},
  // … 2 more rows
];

export function Example() {
  return (
    <ChartCard number="31" title="Parallel coordinates" subtitle="Laptop models compared" takeaway="The Air 13 is light and cheap" level="advanced" replay>
      <ParallelCoordinates
        data={data}
        label="model"
        dimensions={["price","weight","battery","perf","screen"]}
        dimensionLabels={{"price":"Price (10k KRW)","weight":"Weight (kg)","battery":"Battery (h)","perf":"Performance","screen":"Screen (in)"}}
        invert={["price","weight"]}
        highlight="Air 13"
      />
    </ChartCard>
  );
}

Props

<ParallelCoordinates> takes these props. Rows marked Common work the same on every chart.

27 props

Prop
dataRequiredAn array of objects. Pass CSV, REST or database rows as they areobject[]
labelRow name fieldstring | (d, i) => string
dimensionsNumeric fields to use as axesstring[]
dimensionLabelsRename the axesobject
invertAxes where smaller is betterstring[]
canvasThresholdRow count that switches to canvasnumberDefault 1500
heightCommonHeight in px. Without it, each chart picks a default that fits its widthnumber
widthCommonFixed width in px. Without it, the chart fits its parentnumber
highlightCommonItem to highlight. An index, a name, an array, or "max" | "min" | "first" | "last" | "none"number | string | (number|string)[] | "max" …
formatCommonValue format. "number" | "integer" | "percent" (values are already percents: 42 → "42%") | "ratio" (0.42 → "42%") | "compact" | "currency" (KRW for Korean locales, otherwise USD; for another currency pass Intl options with currency) | "decimal" or Intl.NumberFormat options"number" | "percent" | "compact" | …
unitCommonUnit appended to values. For example "%" or "ms"string
localeCommonLocale for numbers, dates and the text a chart writes itself (tooltips, screen reader sentences). "ko" or "ko-*" switches to Korean. Falls back to the ThemeProvider localestringDefault "en-US"
animateCommonEntry and update animationbooleanDefault true
durationCommonAnimation length (ms)number
easingCommonMotion curve"spring" | "easeOut" | "easeInOut" | "linear"Default "spring"
staggerCommonDelay between items as they enter (ms)number
reducedMotionCommon"auto" follows the OS setting. true always turns motion offanyDefault "auto"
animateOnViewCommonPlay when the chart scrolls into viewbooleanDefault true
showLabelsCommonLabels drawn on the chart (values and names)booleanDefault true
tooltipCommonShow tooltips. { template: "{label} · {value} · owner {owner}" } writes them: {label}, {value}, {series} or any other column of the row. \n starts a new line, and a line with an empty value is left outtooltipDefault true
syncIdCommonCharts with the same syncId show the hovered x together (line, area, bar, candlestick). <ChartGrid sync> sets one for every chart inside itstring
ariaLabelCommonName for screen readersstring
descriptionCommonDescription for screen readers. Built from the data when omittedstring
onHoverCommonRuns when hover or keyboard focus moves to another item(e: ChartEvent | null) => void
onClickCommonRuns on click, Enter or Space(e: ChartEvent) => void
replayKeyCommonReplays the entry animation when it changesstring | number
themeCommonChanges theme tokens for this chart onlyPartial<ChartTheme>

Above 1,500 items it draws on a canvas. Axes and labels stay SVG.

Also in Relationship