gantt concept 2

intra day time line of productivity

HTML

<script src="http://highcharts.com/js/testing.js"></script>
<div id="container" style="height:300px"></div>

JavaScript

Highcharts.setOptions({global:{useUTC:false}});
var chart
chart = new Highcharts.Chart({
    chart: {
        renderTo:'container',
        defaultSeriesType:'scatter',
        borderWidth:0,
        //inverted:true,
        margin:[30,35,45,125],
    },
    title:{text:''},
    legend:{
        borderWidth:0,
        shadow:false,
        align:'left',
        verticalAlign:'top',
        y:-7,
        x:120
    },
    exporting:{enabled:false},
    credits:{enabled:false},
    tooltip:{
        formatter:function(){
            return this.point.user + 
                    '<br/> start: ' + Highcharts.dateFormat('%I:%M %p', this.point.start) + 
                    '<br/> end: ' + Highcharts.dateFormat('%I:%M %p', this.point.end) + 
                    '<br/> time: ' + Highcharts.numberFormat(this.point.time) + ' min' +
                    '<br/> item: ' + this.point.item + 
                    '<br/> result: ' + this.point.result;
        }
    
    },
    plotOptions: {
        series: {
            shadow:false,
            color:'rgba(24,90,169,.75)',
            lineWidth:20,
            marker:{
                symbol:'diamond',
                radius:3,
                lineWidth:0,
                states:{
                    hover:{
                        radius:4,
                        lineWidth:0,
                    }
                }
            }
        }
    },
    yAxis:{
        categories:["User A","User B","User C","User D"],
        title:{text:''},
        //startOnTick:false,
        //endOnTick:false,
        gridLineWidth:1,
        gridLineColor:'#ddd',
        alternateGridColor:'rgba(156,156,156,.15)',
        showLastLabel:false,
        tickWidth:1,
        tickLength:100,
        tickColor:'#ccc',
        tickmarkPlacement:'on',
        labels:{
            align:'right',
            y:-20,
            style:{
                fontSize:'18px',
                fontWeight:'bold'
            }
        },        
    },
    xAxis:{
 ...