title: Highcharts/Highstock with React and Boost not working (very high cpu usage)
body: <p>I'm implementing this example <a href="http://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/samples/highcharts/boost/line-series-heavy-dynamic/" rel="nofollow noreferrer">http://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/samples/highcharts/boost/line-series-heavy-dynamic/</a> but with React.</p>
  
  <pre><code>import React from 'react'
  import Highcharts from 'highcharts'
  import HighchartsBoost from 'highcharts/modules/boost'
  HighchartsBoost(Highcharts)
  
  Highcharts.setOptions({
      global: {
          useUTC: false
      }
  });
  
  class Plot extends React.Component {
    constructor(props) {
      super(props)
  
      this.n = 20
      this.s = 600
      this.addPoint = this.addPoint.bind(this)
    }
  
    componentDidMount() {
      var series = getSeries(this.n, this.s)
  
      console.time('line');
      this.chart = Highcharts.chart('hc-container', {
          boost: {
            enabled: true,
            seriesThreshold: 1
          },
          chart: {
              animation: false,
              zoomType: 'x'
          },
          title: {
              text: 'Highcharts drawing ' + (this.n * this.s) + ' points across ' + this.s + ' series'
          },
          navigator: {
              xAxis: {
                  ordinal: false//,
              },
              yAxis: {
              },
              series: {
                  color: null
              }
          },
          legend: {
              enabled: false
          },
          xAxis: {
              ordinal: false
          },
          yAxis: {
          },
          subtitle: {
              text: 'Using the Boost module'
          },
          tooltip: {
              valueDecimals: 2,
              shared: false
          },
          series: series
      });
      console.timeEnd('line');
  
      setInterval(this.addPoint, 1000);
    }
  
    addPoint() {
      ++this.n;
  
      if (!this.chart.series) return 
  
      this.chart.series.forEach(se =&gt; {
          var x = this.n
          var y = 2 * Math.sin(x / 100) + Math.random()
  
          //Yeah...
          if (se.options.className === "highcharts-navigator-series") {
              return;
          }
  
          se.addPoint([x, y], false, true, false);
          // se.options.data.push([x, y]);
          // se.options.data.shift();
          // se.isDirty = true;
          // se.isDirtyData = true;
      });
  
      this.chart.redraw();
  
    }
  
    render() {
      return &lt;div id='hc-container' /&gt;
    }
  }
  
  export default Plot
  
  function getData(n) {
      var arr = [],
          i;
      for (i = 0; i &lt; n; i = i + 1) {
          arr.push([
              i,
              2 * Math.sin(i / 100) + Math.random()
          ]);
      }
      return arr;
  }
  
  function getSeries(n, s) {
      var i = 0,
          r = [];
  
      for (; i &lt; s; i++) {
          r.push({
              data: getData(n),
              animation: false,
              lineWidth: 2,
              boostThreshold: 1,
              turboThreshold: 1,
              showInNavigator: true,
              requireSorting: false
          });
      }
  
      return r;
  }
  </code></pre>
  
  <p>I don't think boost module is working this way because CPU goes very very high.
  I their example (running in chrome) CPU is around 0.x
  But in my implementation it goes to 120 most of the time.</p>