Grouped categories demo

author(s): Black Label

by pepperdigital

HTML

<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://blacklabel.github.io/grouped_categories/grouped-categories.js"></script>
<link rel="stylesheet" href="http://blacklabel.github.io/grouped_categories/css/styles.css">
<div id="container" class="chart-container"></div>

JavaScript

$(function () {
    var chart = new Highcharts.Chart({
        chart: {
            renderTo: "container",
            type: "bar",
            width: 500
        },
        title: {
        	text: null
        },
        series: [{
            data: [4, 14, 18, 5, 6, 5]
        },
        {
            data: [96, 86, 82, 95, 84, 95]
        }],
        xAxis: {
        tickWidth: 0,
            categories: [{
                name: "iSCI",
                categories: ["2H 2015", "1H 2016"]
            }, {
                name: "Data Center",
                categories: ["2H 2015", "1H 2016"]
            }, {
                name: "Cloud",
                categories: ["2H 2015", "1H 2016"]
            }],
            labels: {
            groupedOptions:[{
            	style: {
            		width: 125
            	}
            }],
        	align: 'right',
            style: {
              fontWeight: 'normal',
              fontFamily: 'NHassGrotesk',
              fontSize: 9,
              lineHeight: 10,
              color: '#5C5C5C'
            },
          }
            
        },
         plotOptions: {
          series: {
            animation: false,
            allowPointSelect: false,
            stacking: 'percent',
            pointWidth: 20,
            states: {
              hover: {
                enabled: false
              }
            }
          },
          bar: {
            borderWidth: 0,
            dataLabels: {
              y: -5,
              enabled: true,
              overflow: 'none',
              crop: false,
              format: '{y}%',
              align: 'left',
              verticalAlign: 'middle',
              shadow: false,
              style: {
                fontWeight: 'bold',
                fontFamily: 'NHassGrotesk',
                fontSize: 9,
                color: '#FFFFFF',
                textShadow: 'none',
                textOutline: 0
              }
            },
            animation:...