title: How to boost your performance in HighCharts
body: <p>Hey I am using highcharts library for introducing graphs of gases.</p>
  
  <p>I want to boost their performance, so that each graph can handle more than 50,000 points per graph.</p>
  
  <p>I know that I can specify <strong>turboThreshold</strong> to be 1 million and it will works 
  fine,but I have notice a new module called boostjs of HighCharts and I would
   like to use it, but I don't know how.</p>
  
  <p>This is an example of usage:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$(function () {
  
      function getData(n) {
          var arr = [],
              i,
              a,
              b,
              c,
              spike;
          for (i = 0; i &lt; n; i = i + 1) {
              if (i % 100 === 0) {
                  a = 2 * Math.random();
              }
              if (i % 1000 === 0) {
                  b = 2 * Math.random();
              }
              if (i % 10000 === 0) {
                  c = 2 * Math.random();
              }
              if (i % 50000 === 0) {
                  spike = 10;
              } else {
                  spike = 0;
              }
              arr.push([
                  i,
                  2 * Math.sin(i / 100) + a + b + c + spike + Math.random()
              ]);
          }
          return arr;
      }
      var n = 500000,
          data = getData(n);
  
  
      console.time('line');
      $('#container').highcharts({
  
          chart: {
              zoomType: 'x'
          },
  
          title: {
              text: 'Trimmed Highcharts drawing ' + n + ' points'
          },
  
          subtitle: {
              text: 'Using the experimental Highcharts Boost module'
          },
  
          tooltip: {
              valueDecimals: 2
          },
  
          series: [{
              data: data,
              lineWidth: 0.5
          }]
  
      });
      console.timeEnd('line');
  
  });</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://code.highcharts.com/highcharts.js"&gt;&lt;/script&gt;
  &lt;script src="https://code.highcharts.com/modules/boost.js"&gt;&lt;/script&gt;
  &lt;script src="https://code.highcharts.com/modules/exporting.js"&gt;&lt;/script&gt;
  
  &lt;div id="container" style="height: 400px; max-width: 800px; margin: 0 auto"&gt;&lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Apparently I don't need to do anything expect adding the script after highchart's script.This is strange , I was sure that I need to add some property to highcharts graph properties to enable this boost mode.
  I need an explanation on this script and how to use it properly?</p>