JSFiddle - React, Tailwind, and code Playground

by nagoba

HTML

<div id="container2" 
    style="height: 350px; margin: 0 auto">
</div>

JavaScript

var _series = [{
    data: [{
        low: Date.UTC(2012, 0, 1),
        y: Date.UTC(2012, 1, 20),
        activity: 'A',
        color: '#80699B'},
    
        {
        low: Date.UTC(2012, 4, 14),
        y: Date.UTC(2012, 5, 18),
        activity: 'B',
        color: '#80699B'},
       
        {
        low: Date.UTC(2012, 10, 6),
        y: Date.UTC(2012, 11, 7),
        activity: 'C',
        color: '#89A54E'},
   
        {
        low: Date.UTC(2013, 0, 8),
        y: Date.UTC(2013, 1, 9),
        activity: 'D',
        color: '#80699B'},
        
        {
        low: Date.UTC(2013, 3, 10),
        y: Date.UTC(2013, 4, 11),
        activity: 'E',
        color: '#80699B'}
        
],}]

    var chart = new Highcharts.Chart({

    chart: {
        renderTo: 'container2',
        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),
        opposite: true,
        labels: {
         formatter: function() {
           return Highcharts.dateFormat('%a', this.value);
                },
            step:20,
            rotation:90            
        },
        },
        { 
       title:{text:''},       
        linkedTo:0,        
        tickInterval: 30*24 * 3600 * 1000,
        type: 'datetime',
        min: Date.UTC(2012, 0, 1),
        opposite: true,
        labels: {
                formatter: function() {
                    return Highcharts.dateFormat('%b', this.value);
                }
                                       
            }
    },
    {
           title:{text:''},       
        linkedTo:0,        
         tickInterval: 12*30*24 * 3600 *...