ParallelCoordinates
D3-powered parallel coordinates for multi-factor analysis — instrument comparison across rate, duration, credit, liquidity with interactive axis brushing
import { ParallelCoordinates } from "@nodus/design-system/finance"Demo coming soon
Props
| Prop | Type | Default | Description |
|---|---|---|---|
dimensionsreq | PCDimension[] | — | Axis definitions with key, label, optional domain and format |
datareq | PCRow[] | — | Data rows with label, values record, and optional group index |
width | number | — | SVG width in px (default 640) |
height | number | — | SVG height in px (default 380) |
title | string | — | Accessible chart title |
dimensionsrequiredType
PCDimension[]Default —Axis definitions with key, label, optional domain and format
datarequiredType
PCRow[]Default —Data rows with label, values record, and optional group index
widthType
numberDefault —SVG width in px (default 640)
heightType
numberDefault —SVG height in px (default 380)
titleType
stringDefault —Accessible chart title
MobileStacks / Scroll
Parallel coordinates require min 480px for axis brushing to be usable. Wrap in overflow-x-auto on narrow viewports.
Design Rationale
This component was designed to express:
Explore Related
Was this helpful?