Highcharts.pc.cutoff.fix.App.js

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 yAxisDefaultSetting = {
  minPadding: 0.02,
  startOnTick: false,
  endOnTick: false,
};

const data = [
  [0, 0],
  [1, 10],
  [2, 20],
  [3, 30],
  [4, 40],
];

const getOptions = () => ({
  chart: {
    type: 'line',
    width: 800,
    height: 600,
    parallelCoordinates: true,
    parallelAxes: {
      lineWidth: 2,
    },
  },
  title: {
    text: 'Parallel Coordinates Chart',
  },
  xAxis: {
    categories: ['Values 1', 'Values 2'],
    offset: 10,
  },
  yAxis: [
    {
      type: 'linear',
      ...yAxisDefaultSetting,
    },
    {
      type: 'linear',
      ...yAxisDefaultSetting,
    },
  ],
  series: data.map((set, i) => ({
    name: `Line ${i}`,
    data: set,
    lineWidth: 10,
  })),
  credits: {
    enabled: false,
  },
});

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

export default App;