Book Image

Highcharts Essentials

By : Bilal Shahid
Book Image

Highcharts Essentials

By: Bilal Shahid

Overview of this book

Table of Contents (16 chapters)
Highcharts Essentials
Credits
About the Author
About the Reviewers
www.PacktPub.com
Preface
Index

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: