Question

I am using a line chart (Highcharts) for displaying forecast data which is fed dynamically every second.
However I want to display only 48 data in each series. I can easily add new points to series but couldn’t find a way to remove the first element in the series after adding the new element.

setInterval(function () {
  $.get("cross/forecast", { numOfData: 1 }, (function (chart) {
    return function (data) {
      console.log(data);
      var d = jQuery.parseJSON(data);
      // I NEED TO REMOVE FIRST ELEMENTS IN EACH SERIES
      //... something like chart.series[0].removePoint(0,true)
      for (var i = 0; i < d.length; i++) {
        chart.series[0].addPoint(d[i][0], true);
        chart.series[1].addPoint(d[i][1], true);
        chart.series[2].addPoint(d[i][2], true);
      }
    };
  })(chart), "text");
}, 1000);

Answer 1

Almost … try :

chart.series[0].data[0].remove();

To remove the first point (data is an array, arrays are 0 based)… Working example here

If you wanted to add an if statement around your removal you could check the number of points in the series using something like this :

if (chart.series[0].data.length >= 49) {
  chart.series[0].data[0].remove();
}