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

Like this: .9.1/highslide-software/highcharts/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: .9.1/highslide-software/highcharts/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

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

Like this: http://jsfiddle/gh/get/jquery/1.9.1/highslide-software/highcharts./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/gh/get/jquery/1.9.1/highslide-software/highcharts./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

• javascript
• charts
• highcharts

• 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 Commented Aug 12, 2013 at 9:48
• The link isn't dead, I think jsfiddle may be down? – Thomas Commented Aug 12, 2013 at 9:57
• Right. jsfiddle looks down to downforeveryoneorjustme./jsfiddle just now. I'll try again later. – teylyn Commented Aug 12, 2013 at 9:59

3 Answers 3

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

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.

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