Highcharts x axis date format issues

Question

I am trying to build a stacked bar with highcharts. I have some issues regarding the date time format on x axis. see here: http://jsfiddle.net/9y2gnnLy/

I want to add to the x axis an interval of 6 months - which begins with the smallest date and ends with the highest. In addition I want to calculate the duration in tooltip. For example the difference between tow dates: current expiring date - retired date = duration. How can I access the retired date on x axis?

$(function () {
$('#container').highcharts({
    chart: {
        type: 'bar'
    },
    title: {
        text: 'Stacked bar chart'
    },
    xAxis: {
        categories: ['Microsoft Office 2010', 'Microsoft Office 2013', 'Microsoft Office 365']
    },
    yAxis: {
                type: 'datetime',
        labels: {
            formatter: function () {
                return Highcharts.dateFormat('%b %Y', this.value);
            },
        }
            },
    legend: {
        enabled: false
    },
    tooltip: {
            formatter: function() {
                return  '<b>' + this.series.name +'</b><br/>' + '<b>' + this.x +': </b><br/>'+
                    Highcharts.dateFormat('%b %Y',
                                          new Date(this.y)) + " - "
                + Highcharts.dateFormat('%b %Y',
                                          new Date("Retired Date - How to access the retired date on x axis")) + '<br/><br/><b>Duration: </b>';
            }
    },
    plotOptions: {
        series: {
            stacking: 'normal'
        }
    },
    series: [{
        name: 'Retired',
        color: 'rgba(223, 83, 83, .5)',
        data: [Date.parse("1/2/2013"), Date.parse("2/3/2014"), Date.parse("3/4/2015")],
        dataLabels: {
           enabled: true,
           format: '{series.name}'
        }
    }, {
        name: 'Expiring',
        data: [Date.parse("1/2/2012"), Date.parse("6/3/2013"), Date.parse("8/4/2014")], 
        dataLabels: {
           enabled: true,
           format: "{series.name}"
        }
    }, {
        name: 'Standard',
        data: [Date.parse("1/2/2011"), Date.parse("5/3/2012"), Date.parse("4/4/2013")],
        dataLabels: {
           enabled: true,
           format: "{series.name}"
        }
    }, {
        name: 'Planning',
        color: 'rgba(119, 152, 191, .5)',
        data: [Date.parse("1/2/2010"), Date.parse("9/3/2011"), Date.parse("5/4/2012")],
        dataLabels: {
           enabled: true,
           format: '{series.name}'
        }
    }]
});
});

Is it possible to group like this ?

Answer 1

You can use columnrange type of your series. With this type of series it will be much simpler to make the chart that you want to have.

You can set ranges in your bars, so they will look like they are stacked. You can use grouped categories plugin for adding more category levels http://www.highcharts.com/plugin-registry/single/11/Grouped-Categories

series: [{
  name: '1',
  data: [
    [Date.UTC(2011, 01, 01), Date.UTC(2011, 02, 01)],
    [Date.UTC(2011, 01, 02), Date.UTC(2011, 03, 01)],
    [Date.UTC(2011, 01, 01), Date.UTC(2011, 06, 01)]
  ],
  dataLabels: {
    enabled: true,
    format: "{series.name}"
  }
}, {
  name: '2',
  data: [
    [Date.UTC(2011, 02, 01), Date.UTC(2011, 03, 01)],
    [Date.UTC(2011, 03, 01), Date.UTC(2011, 10, 01)],
    [Date.UTC(2011, 06, 01), Date.UTC(2011, 08, 01)]
  ],
  dataLabels: {
    enabled: true,
    format: "{series.name}"
  }
}]

You can move your dataLabels to center of your bar using align: 'center' paramter:

dataLabels: {
  enabled: true,
  align: 'center',
  formatter: function() {
    return this.series.name;
  }
}

Here you can see an example how it can work: http://jsfiddle.net/ttrtb6xt/1/