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

Question

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

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, Aug 12 '13 at 09:48
Right. jsfiddle looks down to http://www.downforeveryoneorjustme.com/jsfiddle.net just now. I'll try again later. — teylyn, Aug 12 '13 at 09:59

Arnauld · Accepted Answer · 2013-12-12T18:49:47.167

8

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

edited Dec 12 '13 at 18:49

answered Dec 02 '13 at 16:39

Arnauld

138
1
10

score 1 · Answer 2 · edited Jul 11 '18 at 10:16

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.

score 0 · Answer 3 · answered Aug 12 '13 at 09:41

0

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

answered Aug 12 '13 at 09:41

Sebastian Bochan

37,348
3
49
75

So when I inverted it, it will be standard stacked column, so to be honest I'm not sure what you would like to achieve. Could you supply a mockup with your concept? – Sebastian Bochan Aug 12 '13 at 11:46
You managed to get it to rotate? I want to create a chart like this http://oi43.tinypic.com/2mg7g3o.jpg thanks. – Thomas Aug 12 '13 at 11:50
I can't use negative values, unless I am mistaken? – Thomas Aug 12 '13 at 14:27
In case when you cannot use negative values but use negative in data, it is quiate strange. – Sebastian Bochan Aug 12 '13 at 14:31

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

3 Answers3

Linked