Highcharts vertical stacked bar chart with negative values, is it possible?

1
votes

Is it at all possible to be able to have a vertically stacked bar chart with negative values (using highcharts).

Like this: http://jsfiddle.net/gh/get/jquery/1.9.1/highslide-software/highcharts.com/tree/master/samples/highcharts/demo/column-stacked/

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

Unfortunately negative values don't register.

This seems to be a solution: http://jsfiddle.net/gh/get/jquery/1.9.1/highslide-software/highcharts.com/tree/master/samples/highcharts/demo/bar-negative-stack/

But for visual reasons I need the bars to be vertical.

Any thoughts on a fix would be greatly appreciated!

Thanks,

Tom

3
javascriptchartshighcharts
The first fiddle link is dead. Please provide a working link. As a general data visualisation rule, a stacked column/bar chart can only plot positive values. – teylyn
The link isn't dead, I think jsfiddle may be down? – Thomas
Right. jsfiddle looks down to downforeveryoneorjustme.com/jsfiddle.net just now. I'll try again later. – teylyn

3 Answers

8
votes

I was trying to achieve the same results. Check this fiddle and let me know =] I used: 

chart: {
    type: 'column'
},
plotOptions: {
    series: {
        stacking: 'normal'
    }
}

jsfiddle for vertical stacked bars w negatives

EDIT: try changing the type to 'bar'. This will make the chart "columns" go horizontal =]

jsFiddle for horizontal stacked bars w negatives

1
votes

The Highcharts demo code for a 'Stacked column' does not work for negative values for the simple reason that the y-axis range is limited in the example code. The answer lies in removing the min=0 argument from the yAxis options.

The yAxis options should read 

    yAxis: {
        title: {
            text: 'Total fruit consumption'
        },
        stackLabels: {
            enabled: true,
            style: {
                fontWeight: 'bold',
                color: (Highcharts.theme && Highcharts.theme.textColor) || 'gray'
            }
        }
    }

With these options in place the example code for the 'Stacked Column' chart will display negative values correctly.

0
votes

You can use stacked column and then set inverted parameter as true, then chart will be rotated.