Based on the example provided by d3-graph-gallery.com

$ yarn add react-parallel-coords

const MockData = [ { id: 'Line1', a: 3, b: 50, c: 6, d: 2 }, { id: 'Line2', a:
1, b: 25, c: 2, d: 2 }, ]; const axes = [ { id: 'a', domain: [0, 10] }, { id:
'b', domain: [0, 100] }, { id: 'c', domain: [0, 10] }, { id: 'd', domain: [0,
10] }, ]; <ParallelCoords axes={axes} data={MockData} onClick={(d) =>
console.log(d.id)} nbrOfTicks={3} strokeWidth={2} selectedStrokeWidth={10}
tooltip={(d) =>
<div>{d.id}</div>
} />

type AxisType = {
  id: string,
  domain?: number[],
};

type Margin = {
  top: number,
  right: number,
  bottom: number,
  left: number,
};

type DataType = {
  id: string,
  [key: string]: any,
};

type TooltipOffset = {
  x: number,
  y: number,
};

type ParallelCoordsProps = {
  margin?: Margin,
  axes: AxisType[],
  axisOpacity?: number,
  axisColor?: string,
  data: DataType[],
  selectedLineId?: string,
  selectionColor?: string,
  selectedStrokeWidth?: number,
  tooltip?: (d: DataType) => ReactNode,
  onClick?: (d: DataType) => void,
  tickFormat?: (axisName: string, value: number) => string,
  labelFormat?: (axisName: string) => string,
  strokeWidth?: number,
  tooltipOffset?: TooltipOffset,
  nbrOfTicks?: number,
  colors?: string[],
};

This project is licensed under the MIT License