[Solved]-Plot Y axis data based on x axis values from a csv file : Highcharts-Highcharts

The scatter plot linked in the comments by @TKoL shows two main differences from your code:

• You need to define the chart.type to be scatter
• The data should be in the format of [[y, x]] for the scatter plot to be able to match y to x locations.

Defining the type is fixed by adding a property to your config:

Hichcarts.chart("container", { 
 chart: { type: "scatter" },
 /* ... */
})

To zip your x and y values, you can loop over two arrays and merge based on index.

A quick one liner (might not be best performing or readable production code version):

const zip = (ys, xs) => 
  xs.reduce(
    (acc, x, i) => (acc.push([x, ys[i]]), acc),
    []
  );

_{Note: You might want to ensure your xs and ys are of equal length and determine the strategy when they're not (throw an error, get rid of values that are not in a pair, etc.)}

Here's a minimal example that uses your data in a scatter plot:

const xValues = [33, 141, 240, 340, 441, 514, 645, 743, 852, 961, 1064, 1172, 1279, 1385, 1495, 1607];

const yValues = [2, 4, 1, 7, 5, 2, 9, 4, 6, 9, 3, 6, 2, 9, 3, 6];

const zip = (ys, xs) => xs.reduce((acc, x, i) => (acc.push([x, ys[i]]), acc), []);



Highcharts.chart('container', {
  chart: {
    type: 'scatter'
  },
  series: [{
    name: 'Installation',
    data: zip(xValues, yValues)
  }]
});

<script src="https://code.highcharts.com/highcharts.js"></script>

<div id="container" style="min-width: 310px; height: 400px; max-width: 800px; margin: 0 auto"></div>