3

Parallel Coordinates

PreviousNext

Multi-dimensional data visualization with parallel axes.

Economy
Midsize
Performance
1520253035mpg45678cylinders100150200250300350horsepower2.0K2.5K3.0K3.5K4.0Kweight1012141618acceleration
"use client"

import { ParallelCoordinates } from "@/components/ui/charts/statistical/parallel-coordinates"

const carData = [
  {
    id: "Model A",
    values: {
      mpg: 32,
      cylinders: 4,
      horsepower: 110,
      weight: 2500,
      acceleration: 17,
    },
    group: "Economy",
  },
  {
    id: "Model B",
    values: {
      mpg: 28,
      cylinders: 6,
      horsepower: 150,
      weight: 3200,
      acceleration: 14,
    },
    group: "Midsize",
  },
  {
    id: "Model C",
    values: {
      mpg: 18,
      cylinders: 8,
      horsepower: 280,
      weight: 4000,
      acceleration: 11,
    },
    group: "Performance",
  },
  {
    id: "Model D",
    values: {
      mpg: 35,
      cylinders: 4,
      horsepower: 95,
      weight: 2300,
      acceleration: 18,
    },
    group: "Economy",
  },
  {
    id: "Model E",
    values: {
      mpg: 25,
      cylinders: 6,
      horsepower: 175,
      weight: 3400,
      acceleration: 13,
    },
    group: "Midsize",
  },
  {
    id: "Model F",
    values: {
      mpg: 15,
      cylinders: 8,
      horsepower: 320,
      weight: 4200,
      acceleration: 10,
    },
    group: "Performance",
  },
  {
    id: "Model G",
    values: {
      mpg: 30,
      cylinders: 4,
      horsepower: 125,
      weight: 2700,
      acceleration: 16,
    },
    group: "Economy",
  },
  {
    id: "Model H",
    values: {
      mpg: 22,
      cylinders: 6,
      horsepower: 200,
      weight: 3600,
      acceleration: 12,
    },
    group: "Midsize",
  },
]

const dimensions = ["mpg", "cylinders", "horsepower", "weight", "acceleration"]

export function ParallelCoordinatesDemo() {
  return (
    <ParallelCoordinates
      data={carData}
      dimensions={dimensions}
      showLabels
      showValues
      lineOpacity={0.6}
    />
  )
}

About

Parallel Coordinates is a powerful technique for visualizing high-dimensional data. Each dimension is represented as a vertical axis, and data points are drawn as polylines connecting values across axes. Great for identifying patterns, clusters, and outliers in multivariate datasets.

Installation

pnpm dlx shadcn@latest add https://ui.simplifyingai.com/r/parallel-coordinates.json

Usage

import { ParallelCoordinates } from "@/components/ui/charts"
 
const data = [
  { id: "Item 1", values: { a: 10, b: 25, c: 15 }, group: "A" },
  { id: "Item 2", values: { a: 22, b: 18, c: 30 }, group: "B" },
]
 
const dimensions = ["a", "b", "c"]
 
export function Example() {
  return <ParallelCoordinates data={data} dimensions={dimensions} />
}

Examples

Default (Standard)

Standard parallel coordinates with straight lines.

Economy
Midsize
Performance
1520253035mpg45678cylinders100150200250300350horsepower2.0K2.5K3.0K3.5K4.0Kweight1012141618acceleration
"use client"

import { ParallelCoordinates } from "@/components/ui/charts/statistical/parallel-coordinates"

const carData = [
  {
    id: "Model A",
    values: {
      mpg: 32,
      cylinders: 4,
      horsepower: 110,
      weight: 2500,
      acceleration: 17,
    },
    group: "Economy",
  },
  {
    id: "Model B",
    values: {
      mpg: 28,
      cylinders: 6,
      horsepower: 150,
      weight: 3200,
      acceleration: 14,
    },
    group: "Midsize",
  },
  {
    id: "Model C",
    values: {
      mpg: 18,
      cylinders: 8,
      horsepower: 280,
      weight: 4000,
      acceleration: 11,
    },
    group: "Performance",
  },
  {
    id: "Model D",
    values: {
      mpg: 35,
      cylinders: 4,
      horsepower: 95,
      weight: 2300,
      acceleration: 18,
    },
    group: "Economy",
  },
  {
    id: "Model E",
    values: {
      mpg: 25,
      cylinders: 6,
      horsepower: 175,
      weight: 3400,
      acceleration: 13,
    },
    group: "Midsize",
  },
  {
    id: "Model F",
    values: {
      mpg: 15,
      cylinders: 8,
      horsepower: 320,
      weight: 4200,
      acceleration: 10,
    },
    group: "Performance",
  },
  {
    id: "Model G",
    values: {
      mpg: 30,
      cylinders: 4,
      horsepower: 125,
      weight: 2700,
      acceleration: 16,
    },
    group: "Economy",
  },
  {
    id: "Model H",
    values: {
      mpg: 22,
      cylinders: 6,
      horsepower: 200,
      weight: 3600,
      acceleration: 12,
    },
    group: "Midsize",
  },
]

const dimensions = ["mpg", "cylinders", "horsepower", "weight", "acceleration"]

export function ParallelCoordinatesDemo() {
  return (
    <ParallelCoordinates
      data={carData}
      dimensions={dimensions}
      showLabels
      showValues
      lineOpacity={0.6}
    />
  )
}

Curved Lines

Smooth curved lines for a softer visual appearance.

5.05.56.06.57.0sepalLength2.62.83.03.23.43.6sepalWidth1.02.03.04.05.06.0petalLength0.00.51.01.52.02.5petalWidth
"use client"

import { ParallelCoordinates } from "@/components/ui/charts/statistical/parallel-coordinates"

// Iris dataset style - measurements of flowers
const flowerData = [
  {
    id: "Sample 1",
    values: {
      sepalLength: 5.1,
      sepalWidth: 3.5,
      petalLength: 1.4,
      petalWidth: 0.2,
    },
  },
  {
    id: "Sample 2",
    values: {
      sepalLength: 4.9,
      sepalWidth: 3.0,
      petalLength: 1.4,
      petalWidth: 0.2,
    },
  },
  {
    id: "Sample 3",
    values: {
      sepalLength: 7.0,
      sepalWidth: 3.2,
      petalLength: 4.7,
      petalWidth: 1.4,
    },
  },
  {
    id: "Sample 4",
    values: {
      sepalLength: 6.4,
      sepalWidth: 3.2,
      petalLength: 4.5,
      petalWidth: 1.5,
    },
  },
  {
    id: "Sample 5",
    values: {
      sepalLength: 6.3,
      sepalWidth: 3.3,
      petalLength: 6.0,
      petalWidth: 2.5,
    },
  },
  {
    id: "Sample 6",
    values: {
      sepalLength: 5.8,
      sepalWidth: 2.7,
      petalLength: 5.1,
      petalWidth: 1.9,
    },
  },
  {
    id: "Sample 7",
    values: {
      sepalLength: 5.0,
      sepalWidth: 3.4,
      petalLength: 1.5,
      petalWidth: 0.2,
    },
  },
  {
    id: "Sample 8",
    values: {
      sepalLength: 6.9,
      sepalWidth: 3.1,
      petalLength: 4.9,
      petalWidth: 1.5,
    },
  },
]

const dimensions = ["sepalLength", "sepalWidth", "petalLength", "petalWidth"]

export function ParallelCoordinatesCurved() {
  return (
    <ParallelCoordinates
      data={flowerData}
      dimensions={dimensions}
      variant="curved"
      showLabels
      showValues
      color="#8b5cf6"
      lineOpacity={0.5}
      valueFormatter={(v) => v.toFixed(1)}
    />
  )
}

API Reference

PropTypeDefaultDescription
dataParallelCoordinatesDataPoint[]requiredArray of data points
dimensionsstring[]requiredDimension names to display
variant"standard" | "curved""standard"Line style
showLabelsbooleantrueShow dimension labels
showValuesbooleantrueShow tick values
lineOpacitynumber0.5Line opacity (0-1)
colorstring-Single color for all lines
colorSchemestring[]blue paletteColors for groups
valueFormatterfunctiontoFixed(0)Format tick values

Data Format

interface ParallelCoordinatesDataPoint {
  id: string // Unique identifier
  values: Record<string, number> // Dimension values
  group?: string // Optional group for coloring
}

Variants

Standard

Straight lines connecting values across axes. Default and most common style.

Curved

Smooth curved lines using monotone interpolation. Provides a softer visual appearance.

Features

  • Hover interactions: Lines highlight on hover with tooltip showing all values
  • Group coloring: Automatic color assignment based on data groups
  • Single color mode: Use color prop for a consistent appearance
  • Interactive tooltips: See all dimension values on hover
  • Dark mode support: Proper styling for both themes

Notes

  • Parallel coordinates are excellent for visualizing multivariate data with 3 or more dimensions
  • Each vertical axis represents a different dimension
  • Lines that intersect frequently may indicate correlations between dimensions
  • Adjust lineOpacity to better see overlapping patterns in dense datasets
  • Groups are color-coded to help identify clusters and patterns