JSFiddle - React, Tailwind, and code Playground

by jlbriggs

HTML

<script src="http://highcharts.com/js/testing.js"></script>
<div id="container1" style="height:44px;width:500px;"></div> 
<div id="container2" style="height:36px;width:500px;"></div>
<div id="container3" style="height:36px;width:500px;"></div>
<div id="container4" style="height:36px;width:500px;"></div>
<div id="container5" style="height:44px;width:500px;"></div>

<!--
8a: 1349697600
12p: 1349712000
2p: 1349719200
4p: 1349726400
6p: 1349733600

4:30: 1349728200
12:45: 1349714700
6:36: 1349735760
2:30: 1349721000

-->

JavaScript

//-------------------------------------------------------
$.extend(Highcharts.Renderer.prototype.symbols, {
    line: function(x, y, r) {
        return ['M',x-(r-20),y,'L',x+r,y];
    }
});

//-------------------------------------------------------
Highcharts.setOptions({
    global:{
        useUTC:false
    },
    chart:{
        defaultSeriesType:'scatter',
        inverted:true,
        marginTop:7,
        marginRight:15,
        marginBottom:7,
        marginLeft:150,        
        borderWidth:0
    },
    credits:{enabled:false},
    exporting:{enabled:false},
    title:{text:''},
    xAxis:{
        tickLength:0,
        lineColor:'#999',
        lineWidth:0,
        labels:{style:{fontWeight:'bold'}}        
    },
    yAxis:{
        type:'datetime',
        min:1349690400000,
        max:1349740800000,
        tickInterval:60*120*1000,
        opposite:true,
        offset:13,
        minPadding:0,
        maxPadding:0,
        tickLength:0,
        gridLineWidth:1,
        startOnTick:true,
        endOnTick:true,
        title:{text: ''},
        labels:{
            style:{
                fontSize:'8px'
            }
        }
    },
    legend:{enabled:false},
    tooltip:{enabled:false},
    plotOptions:{
        scatter:{
            color:'#000',  
            marker:{
                symbol:'circle',
                radius:3,
                fillColor:'#000',
                //lineWidth:3,
                //lineColor:'#000'
            }
        },
          bar:{
              color:'rgba(24,90,169,.25)',
              pointPadding:0,
              groupPadding:0,
              borderWidth:0,
              shadow:false
          }                      
    }
});

//-------------------------------------------------------
var chart1 = new Highcharts.Chart({
    chart:{renderTo:'container1', marginTop:15},
    xAxis:{categories:['Appointment 1']},
    yAxis:{
        labels:{y:10,style:{fontSize:'8px'}},    
       ...