Highcharts date time axis

Question

I want a stacked bar chart with time displayed on y axis as in this jsFiddle.

Times on y axis is coming as 00:00 for all the values. I would like to know why it is not showing different times. For two bars the width of different section should be different because they have different time but it is coming as equal for every data. Data passed by me is UTC milliseconds. Both the bars start at same level even though they have different starting values.

I am trying to achieve is something like this:

Here's my code:

var chartOptions = {
    chart: {
        type: 'bar'
    },
    title: {
        text: 'Stacked bar chart'
    },
    xAxis: {
        categories: [ 'Actual', 'Scheduled' ]
    },
    yAxis: {
        type : 'datetime',
        dateTimeLabelFormats : {
         day: '%H:%M'
        },
        labels:{formatter :function(){
            console.log(this.value);
            return Highcharts.dateFormat('%H:%M', this.value);
        }},
        opposite: true,
        plotLines: [{
            color: '#FF0000',
            width: 2,
            value: 1428042300000,
            label :{text :'current time'} 
        }]
    },
    tooltip : {
        formatter : function() {
          return Highcharts.dateFormat('%H:%M:%S', this.y) + ': <b>' + this.series.name;
        }
      },
    legend: {
        reversed: true
    },
    plotOptions: {
        series: {
            stacking: 'normal',
            dataLabels :{enabled:true,formatter :function(){ if(this.y){return this.series.name}}}
        }
    },
    series: [{"name":"Take-Off","data":[null,1428042300000]},{"name":"Off-Block","data":[null,1428042300000]},{"name":"In-Block","data":[null,1428038700000]},{"name":"Landing","data":[1428038160000,1428038700000]}]
}

Answer 1

The bars appear identical widths because they're representing the relative values of the dates you're passing in, i.e. the whole number of milliseconds since epoch. You need to work out the time span for each stage and plot those instead.

Something like http://jsfiddle.net/3fu5ord0/1/

P.S. Apparently I can't post a jsfiddle link without some code:

series: [{"name": "Take-Off","data": 3600000}] // etc.