Highchart's error : Uncaught SyntaxError: Unexpected token for

Question

So What I am trying to do is that I am trying to create Plotline on a particular X value based on the data I have in an array.

There are 2 data arrays that I have :

 featurex = [95,193,295,393,480,587,700,799,912,1015,1123,1230,1336,1443,1554] ;
 featurey = [0,0,0,0,0,3,0,0,0,0,0,0,0,0,0];

Now What I am trying to do is that I am trying to Plot a plotline on X-axis where my Y-axis is 3 As you can see above.

I am able to do it statically, but I want it to be dynamic.

This is the Highchart's code that I am using.

Highcharts.chart('ppg', {
    chart: {
        type: 'line'
    },
    title: {
        text: 'ECG Data'
    },
    subtitle: {
        text: ''
    },
    xAxis: 

       for( i=0; i<featurex.length; i++)
     {
        if (featurey[i] == 3) {
            plotLines: [

                   {
                        value: featurex[i],
                        color: '#005a9b94',
                        dashStyle: 'shortdash',
                        width: 100,
                    },

        }


      },
      crosshair: false

    },
    yAxis: {
        title: {
            text: 'Peaks'

        }
    },
   tooltip: {
        enable: false
    },
    plotOptions: {
        column: {
            pointPadding: 0.2,
            borderWidth: 0
        }
    },
    series: [{
        name: '',
        lineWidth: 2,
        data: yData,
         animation: {
                duration: 5000
            }
         },
   {    type: 'scatter',
        name: 'Installation',
        data: zip(xPeak, yPeak),
        animation: {
                duration: 5200
            }
      },



     ]
});

});

});
</script>

Here the Plotline code under the Xaxis is the main area of concern. It's throwing me an error :

Uncaught SyntaxError: Unexpected token for

Please guide me on what I am doing wrong.

Any Help is really appreciated. Thanks.

Answer 1

The problem is here,

xAxis: 
    for( i=0; i<featurex.length; i++)

Above is not valid javascript syntax.

If you need plotlines to be dynamic, pass a function that returns an array

xAxis: {
  plotLines: generateDynamicPlotLines(),
}

And your function would be something like,

function generateDynamicPlotLines() {
    const plotLines = [];
    for(var i=0; i<featurex.length; i++) {
       if (featurey[i] == 3) {
           plotLines.push({
           value: featurex[i],
           color: '#005a9b94',
           dashStyle: 'shortdash',
           width: 100,
       });
     }
   }
   return plotLines;
}

Answer 2

Seems your plotLines assignment is missing a ] in your code, it should have been like this,

plotLines: [{
          value: featurex[i],
          color: '#005a9b94',
          dashStyle: 'shortdash',
          width: 100,
      }],
}

Hope this helps!