JSFiddle - React, Tailwind, and code Playground

by Vijay Gujar

HTML

<script src="https://code.highcharts.com/stock/highstock.js"></script>
<script src="https://github.highcharts.com/114c967/modules/boost.js"></script>

<div id="container"></div>

JavaScript

function getData(n) {
  var arr = [],
    i,
    a,
    b,
    c,
    spike;

  for (i = 0; i < 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 * 1000 * 60 * 60 * 24,
      2 * Math.sin(i / 100) + a + b + c + spike + Math.random()
    ]);
  }
  return arr;
}

var n = 1000000,
  data = getData(n);

Highcharts.stockChart('container', {
  chart: {
    zoomType: 'x'
  },
  boost: {
     useGPUTranslations: true
  },
  rangeSelector: {
    selected: 5
  },
  plotOptions:{
    series:{
    	states: {
        hover: {
          lineWidthPlus: 0
        }
      }
    }
  },
  series: [{
    data: data,
    lineWidth: 0,
    boostThreshold: 1 // 1 to force boost
  }]
});