JSFiddle - React, Tailwind, and code Playground

by Nhi Nguyen

HTML

<script src="http://code.highcharts.com/highcharts.js"></script>
<div id="container" style="height: 400px"></div>

JavaScript

var chart;

$(function () {
  Highcharts.setOptions({
    global: {
      useUTC: false
    },
    lang: {
      thousandsSep: ","
    }
  });
  chart = new Highcharts.Chart({
    chart: {
      renderTo: 'container'
    },
    tooltip: {
      crosshairs: true
    },
    xAxis: {
      //type: 'datetime',
      tickPositions: [1356872400000, 1356894000000, 1356915600000, 1356937200000, 1356958800000],
      //labels: ['1','2','3','4','5'],
      categories:['1','2','3','4','5'],
    },
    yAxis: {
      endOnTick: true,
      min: 0,
      showLastLabel: true,
      title: {
        text: null
      }
    },

    series: [{
      type: 'line',
      name: 'Total',
      data: [
        [1356872400000, 8420.0],
        [1356883200000, 699.0],
        [1356894000000, 0.0],
        [1356904800000, 0.0],
        [1356915600000, 0.0],
        [1356926400000, 0.0],
        [1356937200000, 5170.0],
        [1356948000000, 6889.0],
        [1356958800000, 2718.0]
      ]
    }]
  });
});