Replacing highcharts.each in my code as it is being deprecated

Question

I have some highcharts which are synchronized and use the following code to synchronise the crosshairs as the mouse is moved:

//catch mousemove event and have all charts' crosshairs move along indicated values on x axis
function syncronizeCrossHairs(chart) {
['mousemove', 'touchmove', 'touchstart'].forEach(function(eventType) {
var container = $(chart.container),
  offset = container.offset(),
  x;

container[0].addEventListener(eventType,
  (function(evt) {
    x = evt.clientX - chart.plotLeft - offset.left;
    Highcharts.charts.forEach(ch => {
      var e = ch.pointer.normalize(evt), // Find coordinates within the chart   
        points = [];
      ch.series.forEach(s => {
        var point = s.searchPoint(e, true);
        if (point) {
          point.setState();
          if (s.visible) {
             points.push(point)
          }
        }
      })

      if (points) {
        var number = 0;
        Highcharts.each(points, function(p, i) {
         if (!p.series.visible) {
            points.splice(i - number, 1);
            number++;
          }
        })
        if (points.length) {
          ch.tooltip.refresh(points); // Show the tooltip
        }
      }
      ch.xAxis[0].drawCrosshair(x, points[0])
    })
  }))
})
}

I am now getting the following console message:

Highcharts error #32: www.highcharts.com/errors/32/?Highcharts.each=Array.forEach

Highcharts.each: Array.forEach

Can someone advise how I can replace the Highcharts.each command in my code?

Thanks

Answer 1

I think that changing:

Highcharts.each(points, function(p, i) {
 if (!p.series.visible) {
    points.splice(i - number, 1);
    number++;
  }
})

to:

points.forEach((p, i) => {
  if (!p.series.visible) {
    points.splice(i - number, 1);
    number++;
  }
})

Should be enough. Please test it in your application and let me know if it helped.

Answer 2

Wherever you have a Highcharts.each just change it to a for loop. Here's a before and after example from my project with synced charts:

Before (Using the deprecated Highcharts.each way):

Highcharts.each(Highcharts.charts, function (chart) {
  if (chart && chart !== thisChart) {
    if (chart.xAxis[0].setExtremes) {
      chart.xAxis[0].setExtremes(e.min, e.max, undefined, false, {
        trigger: "syncExtremes"
      });
    }
  }
});

And after, just simply changing it to a for loop:

for (let i = 0; i < Highcharts.charts.length; i++) {
  let chart = Highcharts.charts[i];
  if (chart && chart !== thisChart) {
    if (chart.xAxis[0].setExtremes) {
      chart.xAxis[0].setExtremes(e.min, e.max, undefined, false, {
        trigger: "syncExtremes"
      });
    }
  }
}