Highcharts Demo

author(s): Torstein Hønsi

by vasagi

HTML

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

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

CSS

#container {
    width: 100%;
}

JavaScript

function getData(n) {
  const arr = [];
  let a,
    b,
    c,
    spike;
  for (let 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,
      2 * Math.sin(i / 100) + a + b + c + spike + Math.random()
    ]);
  }
  return arr;
}
const n = 10000,
  data = getData(n);

Highcharts.chart('container', {
  boost: {
    useGPUTranslations: true,
    boostThreshold:1
  },
  tooltip: {
    valueDecimals: 2,
    useHTML: true,
    formatter: function(tooltip) {
      if (this.series.type === 'flags') {
        return `
        	<ul>
            	<li>Custom</li>
                <li><b>HTML</b></li>
                <li>tooltip</li>
            </ul>
        `;
      } else {
        return tooltip.defaultFormatter.call(this, tooltip);
      }
    }
  },
  yAxis: {
    min: 0
  },
  plotOptions: {
    flags: {
      shape: 'circlepin',
      y: -50,
      states: {
        inactive: {
          opacity: 1
        }
      },
      point: {
        events: {
          mouseOver: function() {
            const flag = this.graphic;

            flag.attr({
              y: flag.attr('y') - 8
            });
          },
          mouseOut: function() {
            const flag = this.graphic;

            flag.attr({
              y: flag.attr('y') + 8
            });
          },
        }
      }
    }
  },
  series: [{
    data: data,
    lineWidth: 0.5
  }, {
    type: 'flags',
    id: 'alerts',
    name: 'Alerts',
    data: [{
      x: 1000,
      y: -1,
      title: '1'
    }],
  }, {
    type: 'flags',
    linkedTo: 'alerts',
    name: 'Alerts',
    boostThreshold:1,
    data: [[
      5000,
     -1]],
  }]

});