JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://code.highcharts.com/highcharts.js"></script>
HighCharts
<div id="alerts_temp_graph"></div>
<button id="next">Next</button>

JavaScript

$(function () {

    var xCategories = ["06:30AM", "08:30AM", "10:30AM", "12:30PM", "02:30PM", "04:30PM", "06:30PM", "08:30PM", "10:30PM", "12:30AM", "02:30AM", "04:30AM"];
    var alerts_temp_graph = $('#alerts_temp_graph').highcharts({
        credits: {
            enabled: false
        },
        chart: {
            //zoomType: 'x',
            backgroundColor: 'transparent',
            type: 'spline',
        },
        title: {
            text: '',
            x: 0 //center
        },
        xAxis: [{
            gridLineWidth: 0.5,
            startOnTick: false,
            endOnTick: false,
            minPadding: 0,
            maxPadding: 0,
            tickInterval: 1,
            labels: {
                //rotation:-90,
                formatter: function () {
                    return xCategories[this.value];
                }
            },
            min: 0,
            max: 6,
            plotBands: [{
                "color": "",
                    "to": 0,
                    "from": 0.5
            }, {
                "color": "#fcf8e8",
                    "to": 0.5,
                    "from": 1
            }, {
                "color": "#fcf8e8",
                    "to": 1,
                    "from": 1.5
            }, {
                "color": "#fcf8e8",
                    "to": 1.5,
                    "from": 2
            }, {
                "color": "",
                    "to": 2,
                    "from": 2.5
            }, {
                "color": "",
                    "to": 2.5,
                    "from": 3
            }, {
                "color": "",
                    "to": 3,
                    "from": 3.5
            }, {
                "color": "",
                    "to": 3.5,
                    "from": 4
            }, {
                "color": "",
                    "to": 4,
                    "from": 4.5
            }, {
                "color": "",
                    "to": 4.5,
            ...