Stacking column charts

There are two types of stacking in Highcharts:

• Normal stacking
• Percentage stacking

Let's have a look at the normal stacking of column charts in the following sections.

Column charts with normal stacking

Normal stacking stacks the data series on top of each other. This is a great way to visualize the total value of each category while showing any underlying data.

Copy the code of the first example of this chapter and modify the JavaScript to include the plotOptions component, as shown in the following code:

(function() {
  $( '#medal_table' ).highcharts({
    chart: {
      type: 'column'
    },
    title: {
      text: 'Olympics 2012 Medal Table'
    },
    subtitle: {
      text: 'Source: http://www.bbc.com/sport/olympics/2012/medals/countries'
    },
    xAxis: {
      title: {
        text: 'Countries'
      },
      categories: ['United States', 'China', 'Russian Federation', 'Great Britain', 'South Korea']
    },
    yAxis: {
      title: {
        text: 'Number of total medals'
      }
    },
    series: [{
      name: 'Gold',
      data: [46, 38, 24, 29, 13]
    }, {
      name: 'Silver',
      data: [29, 27, 26, 17, 8]
    }, {
      name: 'Bronze',
      data: [29, 23, 32, 19, 7]
    }],
    plotOptions: {
      column: {
        stacking: 'normal'
      }
    }
  });
})();

We configured the chart to stack data series by passing normal to the stacking property, and hence we were introduced to a new Highcharts configuration object, that is, plotOptions.

Note

The plotOptions component contains options related to the plotting of charts, including chart animations, chart display, and other user interaction properties. You can find more about it by visiting http://api.highcharts.com/highcharts#plotOptions.

The resulting chart will look like the following:

By looking at the chart, one can get a quick overview of the total number of medals each country won and in turn can also determine the count for the type of medals for each country.

You can also exclude a particular series from the stacking context if you wish to show it in a different column.

Column charts with percentage stacking

Configuring a column chart for percentage stacking is useful to visualize the ratio of each data series for a given category. It's just a matter of passing percent to the stacking property to make a column chart stack with percentages.

Copy the code from the previous example and remove the stacking: null property from the Bronze series to include it back in the stacking context. Change the plotOptions component to the following:

plotOptions: {
  column: {
    stacking: 'percent'
  }
}

The chart will now show stacked columns based on their proportions:

Percentage stacking calculates the proportion of each data point in the series relative to the sum of all data points.

While stacking is a great feature, it should not be used for a large amount of data series or it will make the chart look overly saturated, making the data visualization difficult. To get more details when working with large and variable numbers of data series, you should use the drilldown feature.