JSFiddle - React, Tailwind, and code Playground

by Sushil Mahajan

HTML

<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>

<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>

JavaScript

$(function () {
    $('#container').highcharts(chartOptions);
});

var chartOptions = {
   "chart":{
      "renderTo":"simulationResultsChartContainer",
      "type":"column",
      "marginTop":40,
      "marginBottom":25,
      "backgroundColor":"#FFFFFF",
      "plotBackgroundColor":"#FFFFFF",
      "marginLeft":50,
      "plotBorderColor":"#000000",
      "plotBorderWidth":0
   },
   "title":{
      "text":null
   },
   "xAxis":{
      "labels":{
         "y":20
      },
      "max":2085436800000,
      "type":"datetime",
      "lineWidth":0,
      "minPadding":0,
      "tickInterval":157784544000.00003,
      "tickWidth":1,
      "tickLength":8,
      "tickColor":"#000000",
      "minorTickInterval":31556908800.000004,
      "minorTickWidth":1,
      "minorTickLength":5,
      "minorTickColor":"#000000",
      "minorGridLineWidth":0
   },
   "yAxis":{
      "title":null,
      "labels":{

      },
      "gridLineColor":"#eeeeee",
      "gridLineWidth":1,
      "tickWidth":1,
      "tickLength":5,
      "tickColor":"#bbccdd"
   },
   "legend":{
      "align":"left",
      "verticalAlign":"top",
      "x":50,
      "borderWidth":0,
      "reversed":true
   },
   "plotOptions":{
      "series":{
         "stacking":"normal",
         "pointStart":1454284800000,
         "pointWidth":15,
         "borderWidth":0,
         "pointInterval":31556908800.000004,
         "shadow":false,
         "events":{

         }
      }
   },
   "series":[
      {
         "data":[
            970,
            1170,
            1370,
            1570,
            1770,
            1970,
            2170,
            2370,
            2570,
            2770,
            2970,
            3170,
            3370,
            3570,
            3770,
            3970,
            4170,
            4370,
            4570,
            4770,
            4970
         ],
         "name":"95thPercentileSeries",
         "color":{
            "linearGradient":{
               "x1":0,
     ...