JSFiddle - React, Tailwind, and code Playground

by dodoflying

HTML

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>

<div id="container" style="height: 400px"></div>
<button id="play" class="autocompare">Play</button>
<button id="click" class="autocompare">Click</button>

JavaScript

var chart = Highcharts.chart('container', {

  xAxis: {
    categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
    plotLines: [{
      value: 0,
      color: 'blue',
      width: 2,
      zIndex: 10
    }]
  },

  series: [{
    id: 'sp500',
    data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4],
    name: 'SP 500 Index'
  }]
});


var drawNextPlotline = function(chart) {
  //console.log(i);
  //console.log(chart.xAxis[0].options);
  var totolXPoints = chart.xAxis[0].categories.length;
  var currentXPoint = chart.xAxis[0].options.plotLines[0].value + 1;
  var newValue = currentXPoint % totolXPoints;
  //var newValue = i;
  chart.xAxis[0].options.plotLines[0].value = newValue;
  chart.xAxis[0].update();

  // Display data information
  if ('#desc_text') {
    $('#desc_text').remove();
  }

  var descText = ((chart.series)[0].name + ' : ' + ((chart.series)[0].data)[currentXPoint].y);

  chart.renderer.text(descText, 80, 80)
    .css({
      fontSize: '13px',
      color: '#000'
    }).attr({
      id: 'desc_text',
      zIndex: 999
    })
    .add();
}

// the button action
var $playButton = $('#play');
var $clickButton = $('#click');

$playButton.click(function() {

  var i = 0,
    nr = chart.xAxis[0].categories.length;
  setInterval(function() {
    if (i < nr) {
      drawNextPlotline(chart);
    }
    i++;
  }, 200)

});

$clickButton.click(function() {

  drawNextPlotline(chart);

});