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

// Generate a large dataset with 10000 data points
var data = [];
var startDate = Date.UTC(2022, 0, 1); // Start date
for (var i = 0; i < 10000; i++) {
    data.push([startDate + (i * 3600 * 1000), Math.random() * 100]); // Add data points with hourly intervals
}

Highcharts.chart('container', {
  boost: {
    useGPUTranslations: true
  },
  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: 1
  }, {
    type: 'flags',
    id: 'alerts',
    name: 'Alerts',
    data: [{
      x: Date.UTC(2022, 0, 1) + (20 * 3600 * 1000),
      y: -10,
      title: '1'
    }],
  }, {
    type: 'flags',
    linkedTo: 'alerts',
    name: 'Alerts',
    data: [{
      x: Date.UTC(2022, 0, 1) + (1040 * 3600 * 1000),
      y: -10,
      title: '1'
    }],
  }]

});