JSFiddle - React, Tailwind, and code Playground

by nancynancy

HTML

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<div id="js-chart-main" class="chart"></div>

JavaScript

var chartMain = new Highcharts.Chart({
  chart: {
    type: "area",
    renderTo: "js-chart-main",
  },
  xAxis: {
    type: 'datetime',
    minPadding: 0,
    maxPadding: -0.843,
    tickInterval: 2 * 3600 * 1000,
  },
  series: [{
    pointStart: Date.UTC(2017, 0, 1),
    pointInterval: 3600 * 1000,
    data: [
      111.30,
      111.60,
      111.75,
      108.45,
      107.70,
      107.15,
      107.50,
      106.20,
      106.50,
      107.00,
      106.80,
      105.90,
      104.65,
      105.70,
      107.05,
      107.05,
      108.10,
      108.10,
      107.90,
      106.40,
      108.95,
      111.30,
      111.60,
      111.75,
      108.45,
      107.70,
      107.15,
      107.50,
      106.20,
      106.50,
      107.00,
      106.80,
      105.90,
      104.65,
      105.70,
      107.05,
      107.05,
      108.10,
      108.10,
      107.90,
      106.40,
      108.95,
      null,
      null,
      null,
      null,
      null,
      null,
      null,
      null,
      null,
      null
    ]
  }]
});