title: How to improve Highcharts setExtremes performance with a ton of data?
body: <p>I have a page making use of Highcharts' highstock.js and boost.js. There is one chart (minus the navigator) however that one chart consists of 200 yAxes. And each yAxes has 30,000 data points. We're attempting to advance the chart slowly every second. However, we're finding that the call to setExtremes for the chart is slow...sometimes horribly slow (particularly in Chrome). So the chart does not appear to move in real-time (we're dealing with datetime data).</p>
  
  <p><a href="https://jsfiddle.net/Eves/kapnLbwh/288/" rel="nofollow noreferrer">https://jsfiddle.net/Eves/kapnLbwh/288/</a></p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;script src="https://code.jquery.com/jquery-3.1.1.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://code.highcharts.com/stock/highstock.js"&gt;&lt;/script&gt;
  &lt;script src="https://code.highcharts.com/highcharts-more.js"&gt;&lt;/script&gt;
  &lt;script src="https://code.highcharts.com/modules/boost.js"&gt;&lt;/script&gt;
  &lt;script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.7.0/moment.min.js" type="text/javascript"&gt;&lt;/script&gt;
  
  &lt;body&gt;
    &lt;button id="add"&gt;Set Extremes&lt;/button&gt;
    &lt;div id="container" style="height: 4000px; min-width: 500px"&gt;&lt;/div&gt;
    &lt;button id="addTwo"&gt;Set Extremes&lt;/button&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>Javascript:</p>
  
  <pre><code>var totalCharts = 200.0;
  
  var data = [];
  var time = (new Date()).getTime();
  
  for (var i = 0; i &lt; totalCharts; i++) {
    var temp = [];
    for (var j = 0; j &lt; 30000; j++) {
      temp.push({
        x: time + j * 1000,
        y: Math.random()
      });
    }
    data.push(temp);
  }
  
  var yAxises = [];
  resize: {
    enabled: true
  }
  
  $('#container')[0].style.height = ((110 * totalCharts) + 200).toString() + 'px';
  
  for (var i = 0; i &lt; totalCharts; i++) {
    var yAxis = {
      labels: {
        align: 'right',
        x: -3
      },
      title: {
        text: null
      },
      height: '100',
      top: (110 * (i + 1)).toString(),
      lineWidth: 2,
    }
    yAxises.push(yAxis);
  }
  
  var serieses = [];
  for (var i = 0; i &lt; totalCharts; i++) {
    var series = {
      type: 'line',
      name: 'Value ' + i.toString(),
      data: data[i],
      yAxis: i,
      boostThreshold:1,
      turboThreshold: 30000
    }
    serieses.push(series);
  }
  
  // create the chart
  var chart = Highcharts.stockChart('container', {
    rangeSelector: {
      selected: 0,
      allButtonsEnabled: false,
      buttonTheme: {
        width: 60
      },
      buttons: [{
        count: 1,
        type: 'second',
        text: '1S'
      }, {
        count: 5,
        type: 'second',
        text: '5S'
      }, {
        type: 'second',
        text: 'All'
      }]
    },
    scrollbar: {
      liveRedraw: false
    },
  
    _navigator: {
      enabled: true
    },
    navigatorButtons: [{
      onClick: function() {}
    }, {
      onClick: function() {}
    }],
    chart: {
      marginLeft: 40, // Keep all charts left aligned
      spacingTop: 20,
      spacingBottom: 20,
      zoomType: 'x'
    },
    title: {
      text: 'Live random data',
      align: 'left',
      margin: 0,
      x: 30
    },
    xAxis: {
      type: 'datetime',
      dateTimeLabelFormats: {
        millisecond: '%Y-%m-%d&lt;br/&gt;%l:%M:%S.%L %p',
        second: '%Y-%m-%d&lt;br/&gt;%l:%M:%S %p',
        minute: '%Y-%m-%d&lt;br/&gt;%l:%M %p',
        hour: '%Y-%m-%d&lt;br/&gt;%l %p',
        day: '%Y&lt;br/&gt;%m-%d',
        week: '%Y&lt;br/&gt;%m-%d',
        month: '%Y-%m',
        year: '%Y'
      },
      labels: {
        style: {
          fontSize: "0.8em"
        }
      },
    },
    yAxis: yAxises,
    series: serieses,
    tooltip: {
      pointFormat: "{point.y}",
      headerFormat: "",
    },
  
    plotOptions: {
      series: {
        turboThreshold: 30000,
        boostThreshold: 1
      }
    }
  });
  
  
  chart.xAxis[0].setExtremes(data[0][1].x, data[0][2000].x, true, false);
  
  var addToExtremes = 1;
  var lastPlaybackTime = null;
  
  function UpdateExtremesEverySecond() {
    var now = new Date();
    if (lastPlaybackTime === null) {
      lastPlaybackTime = new Date(now.getTime() - 1000);
    }
    var nextPlaybackTimeTicks = (lastPlaybackTime.getTime() + 1000 - now.getTime()); // + 1000;
    if (nextPlaybackTimeTicks &lt;= 0) {
      nextPlaybackTimeTicks = 1;
    }
    lastPlaybackTime = now;
  
    console.log('nextPlaybackTimeTicks: ' + nextPlaybackTimeTicks);
    window.setTimeout(UpdateExtremes(), nextPlaybackTimeTicks);
  };
  
  function UpdateExtremes() {
    console.time('setExtremes duration');
    chart.xAxis[0].setExtremes(data[0][1 + (1000*addToExtremes)].x, data[0][2000 + (1000*addToExtremes)].x, true, false);
    console.timeEnd('setExtremes duration');
    addToExtremes = addToExtremes + 1;
    if (addToExtremes &lt; 10) {
      UpdateExtremesEverySecond();
    } else {
      addToExtremes = 1; //reset
    }
  };
  
  $('#add').click(function() {
    UpdateExtremesEverySecond();
  });
  $('#addTwo').click(function() {
    UpdateExtremesEverySecond();
  });
  </code></pre>
  
  <p>This example is the closest I've been able to come to what we really have going on (there is quite a few events on our page and proprietary info too). However, it does demonstrates how slow setExtremes is with all of that data. The questions are:</p>
  
  <p>Is there anything that can be done to improve the performance?</p>
  
  <p>Am I using highcharts' boost functionality correctly?</p>
  
  <p>Am I simply out of luck due to the amount of data I am dealing with?</p>