Highcharts.ParallelCoordinates.3.App.js

import './App.css';
import Highcharts from 'highcharts';
import HighchartsReact from 'highcharts-react-official';
import HighchartsExporting from 'highcharts/modules/exporting';
import HighchartsAccessibility from 'highcharts/modules/accessibility';
import HighchartsParallelCoordinates from 'highcharts/modules/parallel-coordinates';
HighchartsExporting(Highcharts);
HighchartsAccessibility(Highcharts);
HighchartsParallelCoordinates(Highcharts);

const data = [
  [0, 30, Date.UTC(2023)], 
  [2, 45, Date.UTC(2022)], 
  [4, 20, Date.UTC(2022)], 
  [5, 33, Date.UTC(2020)], 
  [6, 60, Date.UTC(2019)],
  [8, 73, Date.UTC(2018)], 
  [9, 80, Date.UTC(2016)],
];

const getOptions = () => ({
  chart: {
    type: 'spline',
    width: 800,
    height: 600,
    parallelCoordinates: true,
    parallelAxes: {
      lineWidth: 2,
    },
  },
  title: {
    text: 'Parallel Coordinates Chart',
  },
  plotOptions: {
    series: {
      marker: {
        enabled: false,
        states: {
          hover: {
            enabled: false,
          },
        },
      },
    },
  },
  tooltip: {
    pointFormat: '{series.name}: <b>{point.formattedValue}</b><br/>',
  },
  xAxis: {
    categories: ['Linear Values', 'Logarithmic Values', 'Years'],
    offset: 10,
  },
  yAxis: [
    {
      type: 'linear',
      min: 0,
      max: 10,
      startOnTick: false,
      reversed: true,
    },
    {
      type: 'logarithmic',
      min: 10,
      max: 100,
      reversed: true,
    },
    {
      type: 'datetime',
    },
  ],
  series: data.map((set, i) => ({
    name: `Line ${i}`,
    data: set,
  })),
  credits: {
    enabled: false,
  },
});

function App() {
  return <HighchartsReact highcharts={Highcharts} options={getOptions()} />;
}

export default App;