JSFiddle - React, Tailwind, and code Playground

by nagoba

HTML

<script type="text/javascript" src="http://www.highcharts.com/js/highcharts.js"></script>
<div id="container" style="height: 400x;width : 600px"></div>

CSS

.highcharts-axis {
   float:left;
   width:100%;
   left:50%!important;
   display:block;
   position:absolute;
}

JavaScript

var _series = [{
    data: [{
        low: Date.UTC(2012, 0, 1),
        y: Date.UTC(2012, 0, 5),
        activity: 'A',
        color: '#80699B'},

    {
        low: Date.UTC(2012, 0, 14),
        y: Date.UTC(2012, 0, 18),
        activity: 'B',
        color: '#80699B'},

    {
        low: Date.UTC(2012, 0, 6),
        y: Date.UTC(2012, 0, 7),
        activity: 'C',
        color: '#89A54E'},

    {
        low: Date.UTC(2012, 1, 9),
        y: Date.UTC(2012, 1, 10),
        activity: 'D',
        color: '#80699B'},

    {
        low: Date.UTC(2012, 1, 14),
        y: Date.UTC(2012, 1, 15),
        activity: 'E',
        color: '#80699B'}

    ],
    }]

var chart = new Highcharts.Chart({

    chart: {
        renderTo: 'container',
        type: 'bar',
        zoomType: 'y'
    },

    title: {
        text: 'Schedule Calendar'
    },

    xAxis: {
        title: {
            text: 'Activities'
        },
        gridLineWidth: 1,
        categories: ['A', 'B', 'C', 'D', 'E'],
        labels: {
            style: {
                width: '600px'
            }
        }
    },

    yAxis: [{
        title: {
            text: ''
        },
        tickInterval: 24 * 3600 * 1000,
        type: 'datetime',
        min: Date.UTC(2012, 0, 1),
        gridLineWidth: 0.4,
        max: Date.UTC(2012, 1, 30),
        opposite: true,
        labels: {
            formatter: function() {
                return Highcharts.dateFormat('%a', this.value);
            },
            rotation: 90,
            minRange: 24*3600 * 1000,
        },
        },
    {
        title: {
            text: ''
        },
        linkedTo: 0,
        tickInterval: 30 * 24 * 3600 * 1000,
        type: 'datetime',
        min: Date.UTC(2012, 0, 1),
        opposite: true,
       minRange:30 * 24 * 3600 * 1000,
        labels: {
            formatter: function() {
                return Highcharts.dateFormat('%b', this.value);
            }

        }},
    {
        title: {
           ...