Accepted answer

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


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


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.

Related Query

More Query from same tag