Grouping x Axis charts

author(s): test

by Geo George

HTML

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

<div id="container" style="min-width: 310px; max-width: 800px; height: 400px; margin: 0 auto"></div>

JavaScript

Highcharts.chart('container', {
  chart: {
    type: 'column'
  },
  title: {
    text: 'Stacked bar chart'
  },
  xAxis: {
    labels: {
      rotation: 0,
      x: 0,
      align: 'center',
      style: {
        fontSize: '10px'
      }
    },
    categories: [{
      name: 'Ghana',
      lineColor:'red',
      categories: ["2011","2014","2017"]
    }, {
      name: 'Kenya',
      categories: ["2011","2014","2017"]
    }],
    lineColor: '#000000',
          lineWidth:1,
          tickColor: '#000000',
          tickWidth: 1,
          tickLength:50
  },
  yAxis: {
    min: 0,
    title: {
      text: 'x-axis'
    }
  },
  legend: {
    reversed: true
  },
  plotOptions: {
    bar: {
      stacking: 'normal'
    }
  },
  series: [{
    name: 'Financial institution',
    data: [29,25,42,42,55,56]
  }, {
    name: 'Mobile money',
    data: [null,13,35,null,58,73]
  }, {
    name: 'Finantioal institution and ',
    data: [29,41,58,42,75,82]
  }]
});