JSFiddle - React, Tailwind, and code Playground

by sbochan

HTML

<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<div id="todaysevents" style="min-width: 400px; height: 400px; margin: 0 auto"></div>

JavaScript

$(function () {
   var chart;
   $(document).ready(function () {
     //BAR CHART STATS FROM LAST 24 HOUR
     chart = new Highcharts.Chart({
       credits: {
         enabled: false
       },
       chart: {
         renderTo: 'todaysevents',
         type: 'line'
       },
       title: {
         text: 'Todays Event Statistics'
       },
       subtitle: {
         text: 'Source: Live data'
       },
       xAxis: {
         type: 'datetime',
         title: {
           text: 'Time of event (24HR) '
         }
       },
       yAxis: {
         min: 0,
         title: {
           text: 'Occurances'
         }
       },
       legend: {
         layout: 'vertical',
         backgroundColor: '#FFFFFF',
         align: 'left',
         verticalAlign: 'top',
         x: 100,
         y: 70,
         floating: true,
         shadow: true
       },
       tooltip: {
         formatter: function () {
           return '<b>' + this.series.name + '</b><br/>' + Highcharts.dateFormat('%H:%M', this.x) + ' - ' + this.y + ' events';
         }
       },
       //plotOptions: { column: { pointPadding: 0.2, borderWidth: 0 } },
       plotOptions: {
         series: {
           point: {
             events: {
               click: function () {
                 if (this.href) location.href = this.href;
                 if (this.series.name == "Events") location.href = "events";
                 if (this.series.name == "High Alerts") location.href = "events/1";
                 if (this.series.name == "Medium Alerts") location.href = "events/2";
                 if (this.series.name == "Low Alerts") location.href = "events/3";
               }
             }
           }
         }
       },


       series: [{
         pointInterval: 3600 * 1000,
         pointStart: Date.UTC(2012, 08, 24),
         name: 'Events',
         color: '#e0c720',
         data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 248, 1950, 5115, 1, 0, 0, 0, 0, 0, 0, 0]
       }, {
         pointInterval: 3600...