JSFiddle - React, Tailwind, and code Playground

by Jens Kühn

HTML

<script src="https://code.highcharts.com/highcharts.js"></script>

<div id="container"></div>

CSS

#container{
   height: 150px;
   width: 100%;
    margin:25px;
    border: solid 1px #000;
}

.highcharts-axis-labels {
    height: 127px;
    width: 35px;
    background: #6293ba;
}

JavaScript

$(function() {

    var plotBands = [
        {
        from: Date.UTC(2012, 8, 24, 12),
        to: Date.UTC(2012, 8, 25, 12),
        color: '#cddee8',
        zIndex: 3},
    {
        from: Date.UTC(2012, 8, 26, 12),
        to: Date.UTC(2012, 8, 27, 12),
        color: '#cddee8',
        zIndex: 3},
    {
        from: Date.UTC(2012, 8, 28, 12),
        to: Date.UTC(2012, 8, 29, 12),
        color: '#cddee8',
        zIndex: 3},
    {
        from: Date.UTC(2012, 8, 30, 12),
        to: Date.UTC(2012, 9, 1, 12),
        color: '#cddee8',
        zIndex: 3},
    {
        from: Date.UTC(2012, 9, 2, 12),
        to: Date.UTC(2012, 9, 3, 12),
        color: '#cddee8',
        zIndex: 3},
    {
        from: Date.UTC(2012, 9, 4, 12),
        to: Date.UTC(2012, 9, 5, 12),
        color: '#cddee8',
        zIndex: 3},
    {
        from: Date.UTC(2012, 9, 6, 12),
        to: Date.UTC(2012, 9, 7, 12),
        color: '#cddee8',
        zIndex: 3},
    {
        from: Date.UTC(2012, 9, 8, 12),
        to: Date.UTC(2012, 9, 9, 12),
        color: '#cddee8',
        zIndex: 3},
    {
        from: Date.UTC(2012, 9, 10, 12),
        to: Date.UTC(2012, 9, 11, 12),
        color: '#cddee8',
        zIndex: 3},
    {
        from: Date.UTC(2012, 9, 12, 12),
        to: Date.UTC(2012, 9, 13, 12),
        color: '#cddee8',
        zIndex: 3},
    {
        from: Date.UTC(2012, 9, 14, 12),
        to: Date.UTC(2012, 9, 15, 12),
        color: '#cddee8',
        zIndex: 3},
    {
        from: Date.UTC(2012, 9, 16, 12),
        to: Date.UTC(2012, 9, 17, 12),
        color: '#cddee8',
        zIndex: 3},
        ];

    var chart = new Highcharts.Chart({
        chart: {
            renderTo: 'container',
            type: 'spline',
            animation: false,
            plotBackgroundColor: '#fafafa',
            backgroundColor: '#fafafa',
            //                borderColor: '#fafafa',
            //                borderWidth: 24,
            borderRadius: 0,
     ...