Highcharts Demo

author(s): Torstein Hønsi

HTML

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

<div id="container" style="height: 400px; min-width: 310px">
  <div id="lastprice" style="position:absolute;x:0">
  </div>
</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;

          const plotband = yAxis.addPlotLine({
            value: 66,
            color: 'red',
            width: 2,
            id: 'plot-line-1',
            /*		label: {
                    text: 66,
                    align: 'right',
                    y: newY,
                    x: 0
                }*/
          });

          const labelOffset = 15
          const plotbandLabel = this.renderer.label((66).toFixed(2), chart.plotLeft + chart.plotWidth - 8, yAxis.toPixels(66) - labelOffset, 'rect').css({
              color: '#FFFFFF'
            }).attr({
              align: 'right',
              zIndex: 99,
              fill: 'rgba(0, 0, 0, 0.75)',
              padding: 8
            })
            .add()

          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(' ');

            newY = yAxis.toPixels(y) - d[2];
            
            plotlabel = yAxis.plotLinesAndBands[0].label;
            plotbandLabel.animate({
                y: yAxis.toPixels(y) - labelOffset
              }, {
                duration: 400,
                step: function() {
                  this.attr({
                    text: yAxis.toValue(this.y + labelOffset).toFixed(2)
                  })
                },
               ...