Highcharts Demo

author(s): Torstein Hønsi

by Black Label

HTML

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://blacklabel.github.io/grouped_categories/grouped-categories.js"></script>

<div id="container"></div>

CSS

#container {
  min-width: 310px;
  max-width: 800px;
  height: 400px;
  margin: 0 auto
}

JavaScript

Highcharts.chart('container', {
  chart: {
    type: 'column'
  },
  xAxis: {
    categories: [{
      name: 'category1',
      categories: ['A', 'B']
    }, {
      name: 'category2',
      categories: ['C', 'D']
    }]
  },
  plotOptions: {
    series: {
      stacking: true
    }
  },
  yAxis: {
    stackLabels: {
      enabled: true
    }
  },
  series: [{
    data: [1, 2, 3, 4]
  }, {
    data: [1, 2, 3, 4]
  }]
});