Charts · Hierarchies & dimensions

ParallelCoordinatesChart

One polyline per row across parallel axes. Family: Hierarchies & dimensions · chart 53 of 60.

Bicycles
model	mass	gears	price	range	rating
Model 01	13.9	15	3,434	125	1.5
Model 02	8.6	22	3,897	29	3.8
Model 03	19.5	13	3,202	62	2.9
Model 04	12.7	15	2,760	28	2.2
Model 05	22.8	21	485	39	2.9
Model 06	20.1	22	1,178	60	3.1
Model 07	22.5	8	3,952	40	4.8
Model 08	22.6	16	1,407	133	1.7
Model 09	18.3	18	2,982	126	3.4
Model 10	19.1	11	2,060	24	2.1
Model 11	13.9	9	2,430	78	2.5
Model 12	18.4	11	1,046	42	1.3
Model 13	9	5	343	55	4
Model 14	16.7	13	3,837	36	4
Model 15	20.8	18	3,644	107	4.8
Model 16	16.2	14	4,053	28	1.5
Model 17	15.9	13	1,664	114	1.3
Model 18	10.4	4	3,600	75	1.9
Model 19	20.6	14	1,052	124	3.5
Model 20	17	4	2,367	50	3.5
Model 21	21	6	2,545	96	3.1
Model 22	20.1	22	3,674	115	3.2
Model 23	18.7	13	2,686	108	1.8
Model 24	21.4	7	863	60	2.6
Model 25	12.8	12	4,163	95	2.4
Model 26	22.9	3	3,148	135	3.5
Model 27	12.6	12	3,104	124	4.2
Model 28	18.2	10	2,765	131	2.3
Model 29	18.3	8	922	106	3.9
Model 30	9	9	886	32	2

Report an issue with this chart

Bicycles
model	mass	gears	price	range	rating
Model 01	13.9	15	3,434	125	1.5
Model 02	8.6	22	3,897	29	3.8
Model 03	19.5	13	3,202	62	2.9
Model 04	12.7	15	2,760	28	2.2
Model 05	22.8	21	485	39	2.9
Model 06	20.1	22	1,178	60	3.1
Model 07	22.5	8	3,952	40	4.8
Model 08	22.6	16	1,407	133	1.7
Model 09	18.3	18	2,982	126	3.4
Model 10	19.1	11	2,060	24	2.1
Model 11	13.9	9	2,430	78	2.5
Model 12	18.4	11	1,046	42	1.3
Model 13	9	5	343	55	4
Model 14	16.7	13	3,837	36	4
Model 15	20.8	18	3,644	107	4.8
Model 16	16.2	14	4,053	28	1.5
Model 17	15.9	13	1,664	114	1.3
Model 18	10.4	4	3,600	75	1.9
Model 19	20.6	14	1,052	124	3.5
Model 20	17	4	2,367	50	3.5
Model 21	21	6	2,545	96	3.1
Model 22	20.1	22	3,674	115	3.2
Model 23	18.7	13	2,686	108	1.8
Model 24	21.4	7	863	60	2.6
Model 25	12.8	12	4,163	95	2.4
Model 26	22.9	3	3,148	135	3.5
Model 27	12.6	12	3,104	124	4.2
Model 28	18.2	10	2,765	131	2.3
Model 29	18.3	8	922	106	3.9
Model 30	9	9	886	32	2

mode="precision"

Bicycles
model	mass	gears	price	range	rating
Model 01	13.9	15	3,434	125	1.5
Model 02	8.6	22	3,897	29	3.8
Model 03	19.5	13	3,202	62	2.9
Model 04	12.7	15	2,760	28	2.2
Model 05	22.8	21	485	39	2.9
Model 06	20.1	22	1,178	60	3.1
Model 07	22.5	8	3,952	40	4.8
Model 08	22.6	16	1,407	133	1.7
Model 09	18.3	18	2,982	126	3.4
Model 10	19.1	11	2,060	24	2.1
Model 11	13.9	9	2,430	78	2.5
Model 12	18.4	11	1,046	42	1.3
Model 13	9	5	343	55	4
Model 14	16.7	13	3,837	36	4
Model 15	20.8	18	3,644	107	4.8
Model 16	16.2	14	4,053	28	1.5
Model 17	15.9	13	1,664	114	1.3
Model 18	10.4	4	3,600	75	1.9
Model 19	20.6	14	1,052	124	3.5
Model 20	17	4	2,367	50	3.5
Model 21	21	6	2,545	96	3.1
Model 22	20.1	22	3,674	115	3.2
Model 23	18.7	13	2,686	108	1.8
Model 24	21.4	7	863	60	2.6
Model 25	12.8	12	4,163	95	2.4
Model 26	22.9	3	3,148	135	3.5
Model 27	12.6	12	3,104	124	4.2
Model 28	18.2	10	2,765	131	2.3
Model 29	18.3	8	922	106	3.9
Model 30	9	9	886	32	2

substrate="green"

Bicycles
model	mass	gears	price	range	rating
Model 01	13.9	15	3,434	125	1.5
Model 02	8.6	22	3,897	29	3.8
Model 03	19.5	13	3,202	62	2.9
Model 04	12.7	15	2,760	28	2.2
Model 05	22.8	21	485	39	2.9
Model 06	20.1	22	1,178	60	3.1
Model 07	22.5	8	3,952	40	4.8
Model 08	22.6	16	1,407	133	1.7
Model 09	18.3	18	2,982	126	3.4
Model 10	19.1	11	2,060	24	2.1
Model 11	13.9	9	2,430	78	2.5
Model 12	18.4	11	1,046	42	1.3
Model 13	9	5	343	55	4
Model 14	16.7	13	3,837	36	4
Model 15	20.8	18	3,644	107	4.8
Model 16	16.2	14	4,053	28	1.5
Model 17	15.9	13	1,664	114	1.3
Model 18	10.4	4	3,600	75	1.9
Model 19	20.6	14	1,052	124	3.5
Model 20	17	4	2,367	50	3.5
Model 21	21	6	2,545	96	3.1
Model 22	20.1	22	3,674	115	3.2
Model 23	18.7	13	2,686	108	1.8
Model 24	21.4	7	863	60	2.6
Model 25	12.8	12	4,163	95	2.4
Model 26	22.9	3	3,148	135	3.5
Model 27	12.6	12	3,104	124	4.2
Model 28	18.2	10	2,765	131	2.3
Model 29	18.3	8	922	106	3.9
Model 30	9	9	886	32	2

ground="cyanotype"

Example

The chart above, in each framework. Pick a framework once and every example on the site follows it. `dimensions` is required: the columns, in axis order.

shell

npm install @silverpoint/react @silverpoint/grounds @silverpoint/fonts

tsx

import '@silverpoint/fonts/fonts.css';
import '@silverpoint/grounds/styles.css';
import { ParallelCoordinatesChart } from '@silverpoint/react/parallel-coordinates-chart';

const data = [
  { model: 'Model 01', mass: 13.9, gears: 15, price: 3434, range: 125, rating: 1.5 },
  { model: 'Model 02', mass: 8.6, gears: 22, price: 3897, range: 29, rating: 3.8 },
  { model: 'Model 03', mass: 19.5, gears: 13, price: 3202, range: 62, rating: 2.9 },
  { model: 'Model 04', mass: 12.7, gears: 15, price: 2760, range: 28, rating: 2.2 },
  { model: 'Model 05', mass: 22.8, gears: 21, price: 485, range: 39, rating: 2.9 },
  { model: 'Model 06', mass: 20.1, gears: 22, price: 1178, range: 60, rating: 3.1 },
  { model: 'Model 07', mass: 22.5, gears: 8, price: 3952, range: 40, rating: 4.8 },
  { model: 'Model 08', mass: 22.6, gears: 16, price: 1407, range: 133, rating: 1.7 },
  { model: 'Model 09', mass: 18.3, gears: 18, price: 2982, range: 126, rating: 3.4 },
  { model: 'Model 10', mass: 19.1, gears: 11, price: 2060, range: 24, rating: 2.1 },
  { model: 'Model 11', mass: 13.9, gears: 9, price: 2430, range: 78, rating: 2.5 },
  { model: 'Model 12', mass: 18.4, gears: 11, price: 1046, range: 42, rating: 1.3 },
  // … 18 more rows of the same shape
];

export default function App() {
  return (
    <div style={{ width: 480 }}>
      <ParallelCoordinatesChart
        data={data}
        labelKey="model"
        dimensions={['mass', 'gears', 'price', 'range', 'rating']}
        title="Bicycles"
      />
    </div>
  );
}

shell

npm install @silverpoint/vue @silverpoint/grounds @silverpoint/fonts

vue

<script setup lang="ts">
import '@silverpoint/fonts/fonts.css';
import '@silverpoint/grounds/styles.css';
import { SpParallelCoordinatesChart } from '@silverpoint/vue/parallel-coordinates-chart';

const data = [
  { model: 'Model 01', mass: 13.9, gears: 15, price: 3434, range: 125, rating: 1.5 },
  { model: 'Model 02', mass: 8.6, gears: 22, price: 3897, range: 29, rating: 3.8 },
  { model: 'Model 03', mass: 19.5, gears: 13, price: 3202, range: 62, rating: 2.9 },
  { model: 'Model 04', mass: 12.7, gears: 15, price: 2760, range: 28, rating: 2.2 },
  { model: 'Model 05', mass: 22.8, gears: 21, price: 485, range: 39, rating: 2.9 },
  { model: 'Model 06', mass: 20.1, gears: 22, price: 1178, range: 60, rating: 3.1 },
  { model: 'Model 07', mass: 22.5, gears: 8, price: 3952, range: 40, rating: 4.8 },
  { model: 'Model 08', mass: 22.6, gears: 16, price: 1407, range: 133, rating: 1.7 },
  { model: 'Model 09', mass: 18.3, gears: 18, price: 2982, range: 126, rating: 3.4 },
  { model: 'Model 10', mass: 19.1, gears: 11, price: 2060, range: 24, rating: 2.1 },
  { model: 'Model 11', mass: 13.9, gears: 9, price: 2430, range: 78, rating: 2.5 },
  { model: 'Model 12', mass: 18.4, gears: 11, price: 1046, range: 42, rating: 1.3 },
  // … 18 more rows of the same shape
];
</script>

<template>
  <div style="width: 480px">
    <SpParallelCoordinatesChart
      :data="data"
      label-key="model"
      :dimensions="['mass', 'gears', 'price', 'range', 'rating']"
      title="Bicycles"
    />
  </div>
</template>

shell

npm install @silverpoint/angular @silverpoint/grounds @silverpoint/fonts

// src/styles.css:
//   @import '@silverpoint/fonts/fonts.css';
//   @import '@silverpoint/grounds/styles.css';

import { Component } from '@angular/core';
import { SpParallelCoordinatesChart } from '@silverpoint/angular/parallel-coordinates-chart';

@Component({
  selector: 'app-root',
  imports: [SpParallelCoordinatesChart],
  template: `
    <div style="width: 480px">
      <sp-parallel-coordinates-chart
        [data]="data"
        labelKey="model"
        [dimensions]="['mass', 'gears', 'price', 'range', 'rating']"
        title="Bicycles"
      />
    </div>
  `,
})
export class App {
  protected readonly data = [
    { model: 'Model 01', mass: 13.9, gears: 15, price: 3434, range: 125, rating: 1.5 },
    { model: 'Model 02', mass: 8.6, gears: 22, price: 3897, range: 29, rating: 3.8 },
    { model: 'Model 03', mass: 19.5, gears: 13, price: 3202, range: 62, rating: 2.9 },
    { model: 'Model 04', mass: 12.7, gears: 15, price: 2760, range: 28, rating: 2.2 },
    { model: 'Model 05', mass: 22.8, gears: 21, price: 485, range: 39, rating: 2.9 },
    { model: 'Model 06', mass: 20.1, gears: 22, price: 1178, range: 60, rating: 3.1 },
    { model: 'Model 07', mass: 22.5, gears: 8, price: 3952, range: 40, rating: 4.8 },
    { model: 'Model 08', mass: 22.6, gears: 16, price: 1407, range: 133, rating: 1.7 },
    { model: 'Model 09', mass: 18.3, gears: 18, price: 2982, range: 126, rating: 3.4 },
    { model: 'Model 10', mass: 19.1, gears: 11, price: 2060, range: 24, rating: 2.1 },
    { model: 'Model 11', mass: 13.9, gears: 9, price: 2430, range: 78, rating: 2.5 },
    { model: 'Model 12', mass: 18.4, gears: 11, price: 1046, range: 42, rating: 1.3 },
    // … 18 more rows of the same shape
  ];
}

shell

pip install reflex-silverpoint-react

python

import reflex as rx
from reflex_silverpoint_react import parallel_coordinates_chart

DATA = [
    {"model": "Model 01", "mass": 13.9, "gears": 15, "price": 3434, "range": 125, "rating": 1.5},
    {"model": "Model 02", "mass": 8.6, "gears": 22, "price": 3897, "range": 29, "rating": 3.8},
    {"model": "Model 03", "mass": 19.5, "gears": 13, "price": 3202, "range": 62, "rating": 2.9},
    {"model": "Model 04", "mass": 12.7, "gears": 15, "price": 2760, "range": 28, "rating": 2.2},
    {"model": "Model 05", "mass": 22.8, "gears": 21, "price": 485, "range": 39, "rating": 2.9},
    {"model": "Model 06", "mass": 20.1, "gears": 22, "price": 1178, "range": 60, "rating": 3.1},
    {"model": "Model 07", "mass": 22.5, "gears": 8, "price": 3952, "range": 40, "rating": 4.8},
    {"model": "Model 08", "mass": 22.6, "gears": 16, "price": 1407, "range": 133, "rating": 1.7},
    {"model": "Model 09", "mass": 18.3, "gears": 18, "price": 2982, "range": 126, "rating": 3.4},
    {"model": "Model 10", "mass": 19.1, "gears": 11, "price": 2060, "range": 24, "rating": 2.1},
    {"model": "Model 11", "mass": 13.9, "gears": 9, "price": 2430, "range": 78, "rating": 2.5},
    {"model": "Model 12", "mass": 18.4, "gears": 11, "price": 1046, "range": 42, "rating": 1.3},
    # … 18 more rows of the same shape
]


def index() -> rx.Component:
    return rx.box(
        parallel_coordinates_chart(
            data=DATA,
            label_key="model",
            dimensions=["mass", "gears", "price", "range", "rating"],
            title="Bicycles",
        ),
        width="480px",
    )


app = rx.App()
app.add_page(index)

Import

Each chart has its own subpath, so a bundle only carries the charts it uses. Every adapter also exports every chart from its barrel.

Framework	Import
React	`import { ParallelCoordinatesChart } from '@silverpoint/react/parallel-coordinates-chart';`
Vue	`import { SpParallelCoordinatesChart } from '@silverpoint/vue/parallel-coordinates-chart';`
Angular	`import { SpParallelCoordinatesChart } from '@silverpoint/angular/parallel-coordinates-chart'; // <sp-parallel-coordinates-chart>`
Reflex	`from reflex_silverpoint_react import parallel_coordinates_chart`

Props

The props ParallelCoordinatesChart adds to the ones every chart takes. Accessor props (…Key, keys, names) name fields of your rows and are ignored without data.

React / Angular	Vue	Reflex	Type	Description
`labelKey`	`label-key`	`label_key`	`Accessor<string \| null \| undefined>`	—
`dimensions`	`dimensions`	`dimensions`	`readonly string[]`	The dimension columns, in axis order.
`domains`	`domains`	`domains`	`Readonly<Record<string, readonly [number, number]>>`	Axis domains by dimension; derived from the data when omitted.

Common props

Every chart also takes these. Framework conventions: camelCase in React and Angular, kebab-case in Vue templates, snake_case in Reflex. Read more about them.

Show the 22 common props

React / Angular	Vue	Reflex	Type	Description
`data`	`data`	`data`	`readonly Datum[]`	Rows to draw. If omitted, the demo dataset is rendered (REQ-093) and the accessor props (`…_key`, `keys`, `names`) are ignored.
`ground`	`ground`	`ground`	`GroundRef`	Style ground: `silverpoint` or `cyanotype`, or a ground object. Defaults to the app provider's, or `silverpoint`.
`substrate`	`substrate`	`substrate`	`SubstrateName`	Prepared substrate within the ground (REQ-046).
`mode`	`mode`	`mode`	`InkMode`	`ink` by default; `precision` disables inking (REQ-021).
`seed`	`seed`	`seed`	`Seed`	Seed. If omitted, it is derived from `id` stably (REQ-003).
`id`	`id`	`id`	`string`	Stable identifier. If omitted, it is generated deterministically.
`height`	`height`	`height`	`number`	Height of the drawing area in px. Width is the container's unless pinned.
`width`	`width`	`width`	`number`	—
`chrome`	`chrome`	`chrome`	`'card' \| 'bare'`	`card` draws the full frame; `bare` only the drawing area (REQ-095).
`hatchFill`	`hatch-fill`	`hatch_fill`	`'tile' \| 'per-shape'`	How areas are filled (REQ-029).
`title`	`title`	`title`	`string`	—
`badge`	`badge`	`badge`	`string`	—
`value`	`value`	`value`	`string \| number`	—
`unit`	`unit`	`unit`	`string`	—
`footerLeft`	`footer-left`	`footer_left`	`string`	—
`footerRight`	`footer-right`	`footer_right`	`string`	—
`label`	`label`	`label`	`string`	Accessible name. If omitted, it is derived from `title` (REQ-120).
`description`	`description`	`description`	`string`	Long description for screen readers (REQ-120).
`dataTable`	`data-table`	`data_table`	`'visible' \| 'hidden' \| 'none'`	Tabular alternative; `hidden` leaves it for assistive technology only (REQ-121).
`locale`	`locale`	`locale`	`string`	—
`numberFormat`	`number-format`	`number_format`	`Intl.NumberFormatOptions`	—
`className`	`class-name`	`class_name`	`string`	—

Pointer and keyboard exploration are built in. The item under the pointer or focus is reported, and a click, Enter or Space selects it. The item is { seriesKey, index, datum, value, point: { x, y } }.

Framework	Active item	Selection	Custom readout
React	`onActiveChange`	`onSelect`	`tooltip={(item, readout) => …}`
Vue	`@active-change`	`@select`	`<template #tooltip>`
Angular	`(activeChange)`	`(select)`	`<ng-template spTooltip>`
Reflex	`on_active_change`	`on_select`	`tooltip=tooltip_template(…)`

Interaction and readouts →

Report it

Found something wrong with ParallelCoordinatesChart? Open an issue on GitHub — the form comes pre-filled with the chart and the version.

ParallelCoordinatesChart

Example

Import

Props

Common props

Events