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...