Bar with negative stack

author(s): Torstein Hønsi

by arjunasuresh3

HTML

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<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>

</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 = [
  'ER visits', 'xyz', '$25000', 'abc',
  'frequent hospital visits', 'something else'
];

Highcharts.chart('container', {
  chart: {
    type: 'bar'
  },
  title: {
    text: 'opioid chart'
  },
  subtitle: {
    text: 'opioid chart'
  },
  accessibility: {
    point: {
      descriptionFormatter: function(point) {
        var index = point.index + 1,
          category = point.category,
          val = Math.abs(point.y),
          series = point.series.name;

        return index + ', Age ' + category + ', ' + val + '%. ' + series + '.';
      }
    }
  },
  xAxis: [{
    categories: categories,
    reversed: false,
    labels: {
      step: 1
    },
    color: '#FF0000',
    accessibility: {
      description: 'Age (male)'
    }
  }, { // mirror axis on right side
    opposite: true,
    reversed: false,
    color: '#FF0000',
    categories: categories,
    linkedTo: 0,
    labels: {
      step: 1
    },
    accessibility: {
      description: 'Age (female)'
    }
  }],
  yAxis: {
    title: {
      text: null
    },
    accessibility: {
      description: 'Percentage population',
      rangeDescription: 'Range: 0 to 5%'
    }
  },

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

  series: [{
    name: 'Male',
    data: [
      2.2, 0, 2.2, 0,
      2.7, 0
    ],
    color: 'green'
  },
  {
    name: 'Female',
    data: [
      0, -2.1, 0, -2.4,
      0, -3.0
    ],
    color: 'red'
  }]
});