Highcharts.ParallelCoordinates.7.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), Date.UTC(2023, 0), Date.UTC(2023, 0, 1, 8, 20, 30), 0, 1], 
  [2, 45, Date.UTC(2022), Date.UTC(2023, 2), Date.UTC(2023, 0, 1, 9, 0, 0), 0, 0], 
  [4, 20, Date.UTC(2022), Date.UTC(2023, 3), Date.UTC(2023, 0, 1, 7, 0, 0), 1, 0], 
  [5, 33, Date.UTC(2020), Date.UTC(2023, 4), Date.UTC(2023, 0, 1, 12, 30, 0), 2, 1], 
  [6, 60, Date.UTC(2019), Date.UTC(2023, 4), Date.UTC(2023, 0, 1, 14, 40, 10), 2, 1],
  [8, 73, Date.UTC(2018), Date.UTC(2023, 6), Date.UTC(2023, 0, 1, 17, 0, 30), 2, 1], 
  [9, 80, Date.UTC(2016), Date.UTC(2023, 8), Date.UTC(2023, 0, 1, 19, 45, 15), 3, 1],
];

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', 'Months', 'Time', 'Categories', 'State'],
    offset: 10,
  },
  yAxis: [
    {
      type: 'linear',
      min: 0,
      max: 10,
      startOnTick: false,
      reversed: true,
    },
    {
      type: 'logarithmic',
      min: 10,
      max: 100,
      reversed: true,
    },
    {
      type: 'datetime',
    },
    {
      type: 'datetime',
      min: Date.UTC(2023, 0),
      max: Date.UTC(2023, 11),
      tickInterval: 24 * 3600 * 1000 * 30,
      reversed: true,
      labels: {
        format: '{value:%B}',
      },
    },
    {
      type: 'datetime',
      reversed: true,
      labels: {
        format: '{value:%l:%M:%S %p}',
      },
    },
    {
      type: 'category',
      reversed: true,
      categories: ['A', 'B', 'C', 'D'],
    },
    {
      type: 'category',
      categories: ['False', 'True'],
    },
  ],
  series: data.map((set, i) => ({
    name: `Line ${i}`,
    data: set,
  })),
  credits: {
    enabled: false,
  },
});

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

export default App;