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 : What I have for now is just next example : http://jsfiddle.net/futw

Solution 1:

You could use two y axes that will have defined position using top and height.

Demo: http://jsfiddle.net/futw5e8k/2/

Highcharts.chart('container', {

    chart: {
        type: 'column'
    },

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

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

    yAxis: [{
        allowDecimals: false,
        title: {
            text: 'Number of fruits',
            y: 100,
            x: -10
        },
        top: 50,
        height: 124
    },{
    		title: {
        	text: null
        },
        top: 200,
        height: 150,
        offset: 0
    }],

    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',
        yAxis: 1,
        data: [-3, -4, -4, -2, -5],
    }]
});

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>

<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>