Highcharts Demo

author(s): Torstein Hønsi

by anikettiwari

HTML

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

<div id="container" style="height: 400px; min-width: 310px"></div>

JavaScript

$(function() {

  Highcharts.setOptions({
    global: {
      useUTC: false
    }
  });

  // Create the chart
  $('#container').highcharts('StockChart', {
    chart: {
      events: {
        load: function() {

          // set up the updating of the chart each second
          var series = this.series[0],
            hasPlotLine = false,
            $button = $('#button'),
            chart = $('#container').highcharts(),
            yAxis = chart.yAxis[0],
            plotLine,
            d,
            newY;

          yAxis.addPlotLine({
            value: 50,
            color: 'red',
            width: 2,
            id: 'plot-line-1'
          });

          const plotband = yAxis.addPlotBand({
            from: 100000,
            to: 50,
            color: {
              linearGradient: {
                x1: 1,
                y1: 1,
                x2: 1,
                y2: 0
              },
              stops: [
                [0, 'rgba(46, 230, 0, 0.22)'],
                [1, 'rgba(46, 230, 0, 0)'] //down
              ]
            },
            id: 'plot-band-1'
          });

          setInterval(function() {
            var x = (new Date()).getTime(), // current time
              y = Math.round(Math.random() * 100);
            series.addPoint([x, y], true, true);

            plotLine = yAxis.plotLinesAndBands[0].svgElem;
            d = plotLine.d.split(' ');
            
            const newY = yAxis.toPixels(y)

            plotLine.animate({
              translateY: newY - d[2]
            }, 300);
            
            const plotbandPath = plotband.svgElem.d.split(' ')
            plotbandPath[7] = plotbandPath[9] = newY

            plotband.svgElem.animate({
              d: plotbandPath
            }, 300)


          }, 100000);
        }
      }
    },

    rangeSelector: {
      buttons: [{
        count: 1,
        type: 'minute',
        text: '1M'
      }, {
        count: 5,
        type: 'minute',
        text:...