Bar with negative stack

author(s): Torstein Hønsi

by Black Label

HTML

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
<script src="https://code.highcharts.com/modules/accessibility.js"></script>

<figure class="highcharts-figure">
    <div id="container"></div>
    <p class="highcharts-description">
        Bar chart showing german population distribution by using a mirrored
        horizontal column chart with stacking and two x-axes.
    </p>
</figure>

CSS

#container {
    height: 400px;
}

.highcharts-figure,
.highcharts-data-table table {
    min-width: 310px;
    max-width: 800px;
    margin: 1em auto;
}

.highcharts-data-table table {
    font-family: Verdana, sans-serif;
    border-collapse: collapse;
    border: 1px solid #ebebeb;
    margin: 10px auto;
    text-align: center;
    width: 100%;
    max-width: 500px;
}

.highcharts-data-table caption {
    padding: 1em 0;
    font-size: 1.2em;
    color: #555;
}

.highcharts-data-table th {
    font-weight: 600;
    padding: 0.5em;
}

.highcharts-data-table td,
.highcharts-data-table th,
.highcharts-data-table caption {
    padding: 0.5em;
}

.highcharts-data-table thead tr,
.highcharts-data-table tr:nth-child(even) {
    background: #f8f8f8;
}

.highcharts-data-table tr:hover {
    background: #f1f7ff;
}

JavaScript

// Data gathered from http://populationpyramid.net/germany/2015/

// Age categories
var categories = [
  '0-4', '5-9', '10-14', '15-19',
  '20-24', '25-29', '30-34', '35-39', '40-44',
  '45-49', '50-54', '55-59', '60-64', '65-69',
  '70-74', '75-79', '80-84', '85-89', '90-94',
  '95-99', '100 + '
];

Highcharts.chart('container', {
  chart: {
    type: 'bar'
  },
  title: {
    text: 'Population pyramid for Germany, 2018'
  },
  subtitle: {
    text: 'Source: <a href="http://populationpyramid.net/germany/2018/">Population Pyramids of the World from 1950 to 2100</a>'
  },
  accessibility: {
    point: {
      valueDescriptionFormat: '{index}. Age {xDescription}, {value}%.'
    }
  },
  xAxis: [{
    categories: categories,
    reversed: false,
    labels: {
      step: 1
    },
    accessibility: {
      description: 'Age (male)'
    }
  }, { // mirror axis on right side
    opposite: true,
    reversed: false,
    categories: categories,
    linkedTo: 0,
    labels: {
      step: 1
    },
    accessibility: {
      description: 'Age (female)'
    }
  }],
  yAxis: {
    stackLabels: {
      enabled: true
    },
    title: {
      text: null
    },
    labels: {
      formatter: function() {
        return Math.abs(this.value) + '%';
      }
    },
    accessibility: {
      description: 'Percentage population',
      rangeDescription: 'Range: 0 to 5%'
    }
  },

  plotOptions: {
    series: {
      stacking: 'normal'
    }
  },

  tooltip: {
    formatter: function() {
      return '<b>' + this.series.name + ', age ' + this.point.category + '</b><br/>' +
        'Population: ' + Highcharts.numberFormat(Math.abs(this.point.y), 1) + '%';
    }
  },

  series: [{
    name: 'Male',
    data: [
      -2.2, -2.1, -2.2, -2.4,
      -2.7, -3.0, -3.3, -3.2,
      -2.9, -3.5, -4.4, -4.1,
      -3.4, -2.7, -2.3, -2.2,
      -1.6, -0.6, -0.3, -0.0,
      -0.0
    ]
  }, {
    name: 'Female',
    data: [
      2.1, 2.0, 2.1, 2.3, 2.6,
      2.9, 3.2, 3.1, 2.9, 3.4,
      4.3,...