Negatively stacked bar charts

In this example, we will compare the average book consumption data for the year 2014 with the year 2012 using negative stacking. Copy the code from the previous example and include the data series for the year 2012, as shown in the following code:

series: [{
  name: '2014',
  data: [16, 17, 18, 13,15, 21]
}, {
  name: '2012',
  data: [-14, -15, -19, -19, -14, -19]
}]

To enable negative stacking, the data series must contain values in negative. We can now enable the stacking in the plotOptions component, as shown in the following code:

plotOptions: {
  series: {
    dataLabels: {
      enabled: true,
      formatter: function() {
        return this.y + '%';
      }
    },
    stacking: 'normal'
  }
}

However, the negatively stacked bars won't show until we change the min property in yAxis from 0 to -25.

Refresh the page and you should see a negatively stacked bar chart, as shown in the following screenshot: