Charts > Parallel coordinates ​

A chart displays multivariate data by representing each data point as a polyline connecting points on multiple parallel axes, facilitating visual analysis of relationships and patterns across dimensions.

The Chart ​

Randomize dataUpload data

Download example CSV

Copy HTML

Playground ​

Data

Style

Usage Example ​

<template>
  <ParallelCoordinates
    :data="filteredData"
    :dimensions="metrics"
    :allow-dragging="true"
    @drag="reorderMetrics"
  />
</template>

<script setup>
const orderedMetrics = ref([]);

const reorderMetrics = (arr) => {
  orderedMetrics.value = [...arr];
};
</script>

Component API ​

This chart is built using SVG and d3. Each data element (e.g. product, country, person) is a line and each axis represents a measurement.

Axes can be brushed to select lines. They can also be dragged (on axis label) to change the order.

Data ​

[
  { id: 'data-1, name: "Data 1", var1: 20, var2: 40, var3: 60 },
  { id: 'data-2, name: "Data 2", var1: 40, var2: 10, var3: 50 },
  ...
]

Props ​

Events ​

Dependencies ​

• d3

Featured in ​

• WEF