Question

I have made a Highcharts chart with grouped and stacked columns, like in the example found here: http://www.highcharts.com/demo/column-stacked-and-grouped. The example shows a number of fruits for 5 different persons, grouped by gender. What I miss in this example, is an x-axis label showing the name of the group (male or female) underneath each group. Is it possible to add this to the chart?

Here is a simplified version of the chart I’m trying to make: http://jsfiddle.net/WQjVP/66/. It shows the number of open (blue) and overdue (red) issues for three locations in a case handling system. The left column in each group shows the numbers for that location for July, and the right column in each group shows the numbers for August for the same unit. What I would like to do is to show the month under each column, so that the first column will have “Jul”, the second will have “Aug”, the third will have “Jul” and so on, between the column and the location label.

chart = new Highcharts.Chart({
    chart: {
        renderTo: 'container',
        type: 'column'
    },
    title: {
         text: ''
    },
    subtitle: {
        text: ''
    },
    xAxis: {
        categories: ["Location A","Location B","Location C"],
        title: {
            text: "Location"
        }
    },
    yAxis: {
        allowDecimals: false

    },
    plotOptions: {
        series: {
            dataLabels: {
                enabled: true,
                formatter: function() {
                    if (this.y === 0) {
                        return null;
                    }
                    return this.y;
                },
                style: {
                    color: 'white'
                }
            }
        },
        column: {
            stacking: 'normal',
            borderWidth: 0
        }
    },
    series: [{
        "color": "rgb(0,0,255)",
        "name": "open",
        "data": [18, 2, 6],
        "stack": "Jul"},
    {
        "color": "rgb(255,0,0)",
        "name": "overdue",
        "data": [0, 0, 0],
        "stack": "Jul"},
    {
        "color": "rgb(0, 0, 255)",
        "name": "open",
        "data": [20, 1, 10],
        "stack": "Aug"},
    {
        "color": "rgb(255, 0, 0)",
        "name": "overdue",
        "data": [2, 1, 2],
        "stack": "Aug"
    }]
});

Answer 1

Try to use stackedLabels.

yAxis: {
    stackLabels: {
        enabled: true,
        style: {
            fontWeight: 'bold',
            color: 'gray'
        },
        formatter: function() {
            return  this.stack;
        }
    }
}

Demo

reference