JSFiddle - React, Tailwind, and code Playground

by core972

HTML

<script src="http://code.highcharts.com/highcharts.js">
</script>
<script type="text/javascript" src="http://www.highcharts.com/samples/data/three-series-1000-points.js"></script>

<div id="container1" style="height: 350px; min-width: 600px"></div>

JavaScript

var i = -99;
    var olddata = [20.9, 22.3, 22.3, 22.1, 21.6, 21.7, 19.8,
      18.6, 17.8, 16.5, 15.3, 15.0, 14.9, 16.3, 16.1,
      15.1, 14.8, 15.0, 17.8, 19.4, 19.4, 20.1,
      21.1, 21.8, 21.0, 21.8, 23.0, 23.8, 22.5, 22.7,
      22.1, 20.8, 19.5, 18.6, 17.0, 15.8, 15.1,
      14.5, 14.1, 13.6, 13.4, 13.2, 18.6, 20.2, 19.5,
      17.8, 17.6, 18.0, 18.3, 18.9, 20.2, 21.7,
      21.2, 20.7, 20.7, 17.8, 15.9, 14.6, 13.1, 11.7, 11.8,
      12.4, 12.6, 12.8, 12.9, 13.0, 13.3, 14.2,
      14.5, 15.3, 17.2, 17.5, 17.0, 16.4, 16.2, 16.1,
      16.9, 17.6, 15.7, 14.8, 14.1, 13.4, 12.7,
      12.1, 11.8, 11.6, 11.4, 11.3, 11.1, 11.3, 11.8,
      12.1, 13.0, 14.3, 15.5, 15.6, 15.5, 15.3, 15.4,
      16.3, 17.7, 15.9, 14.2, 13.5, 12.5, 11.8,
      11.4, 12.0, 10.3, 9.8, 10.4, 9.5, 9.5, 9.2,
      8.1, 8.9, 10.7, 12.9, 14.1, 15.2, 14.4, 15.0
    ];
    var data1 = [];
    var NewTime = 0;

    $(function() {
      var options = {
        chart: {
          renderTo: 'container1',
          plotBorderWidth: 3,
        },
        xAxis: {
          type: 'datetime',
          ordinal: false,
          gridLineWidth: 1,
          tickPixelInterval: 125,
          title: {
            style: {
              color: '#333',
              fontWeight: 'bold',
              fontSize: '12px',
              fontFamily: 'Trebuchet MS, Verdana, sans-serif'

            }
          }
        },
        series: [{
          marker: {
            radius: 0
          },
          data: (function() {
            var time = (new Date()).getTime();

            for (j = 0; i <= 0; i++, j++) {
              data1.push([
                time + i * 1000,
                olddata[j]
              ]);
            }
            NewTime = time;
            return data1;
          })()
        }]
      }

      var chart1 = new Highcharts.chart($.extend(true, {}, options, {
        chart: {
          renderTo: 'container1',
          events: {
            load: function() {
              // set up...