Column chart with negative values and categories on xAxis in HighCharts

Well, I’m using highcharts in web app.
Here is task to show Demographical data in column chart like on image :

enter image description here

What I have for now is just next example : http://jsfiddle.net/futw5e8k/1/

Highcharts.chart('container', {

chart: {
    type: 'column'
},

title: {
    text: 'Total fruit consumtion, grouped by gender'
},

xAxis: {
    categories: ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas'],
    offset: -150
},

yAxis: {
    allowDecimals: false,
    title: {
        text: 'Number of fruits'
    }
},

tooltip: {
    formatter: function () {
        return '<b>' + this.x + '</b><br/>' +
            this.series.name + ': ' + this.y + '<br/>' +
            'Total: ' + this.point.stackTotal;
    }
},

plotOptions: {
    column: {
        stacking: 'normal'
    }
},

series: [{
    name: 'John',
    data: [5, 3, 4, 7, 2],
}, {
    name: 'Joe',
    data: [-3, -4, -4, -2, -5],
}]

});

Currently is problem with displaying categories in middle of graph with some space.


Source: stackoverflow-javascript