Highcharts Demo

author(s): Torstein Hønsi

by Geo George

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>

JavaScript

var chart = Highcharts.chart('container', {
  chart: {
    type: 'bar'
  },

  xAxis: {
    labels: {
      x: -7,
    },
    categories: [{
      name: "Group A",
      categories: ["Pre", "Post"],

    }, {
      name: "Group B",
      categories: ["Pre", "Post"]
    }, {
      name: "Group C",
      categories: ["Pre", "Post"]
    }, {
      name: "Group D",
      categories: ["Pre", "Post"]
    }, {
      name: "Group E",
      categories: ["Pre", "Post"]
    }, {
      name: "Group F",
      categories: ["Pre", "Post"]
    }, {
      name: "Group G",
      categories: ["Pre", "Post"]
    }],
  },

  plotOptions: {
    series: {
      stacking: 'normal'
    }
  },
  series: [{
    name: 'Score1',
    data: [1, 1, 1, 1, 3, 1, 2, 2, 2, 1, 2, 1, 1, 2],
    color: 'blue'
  }, {
    name: 'Score2',
    data: [0, 0, 0, 0, 0, 4, 0, 0, 0, 0, 0, 0, 0, 0],
    color: 'green'
  }, {
    name: 'Score3',
    data: [0, 3, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
    color: 'red'
  }, {

    name: 'Score4',
    data: [4, 0, 4, 4, 2, 0, 1, 3, 2, 4, 3, 4, 4, 4],
    color: 'grey',
  }]
});