Grouped categories demo

author(s): Black Label

by pepperdigital

HTML

<script src="https://blacklabel.github.io/grouped_categories/grouped-categories.js"></script>
<link rel="stylesheet" href="https://blacklabel.github.io/grouped_categories/css/styles.css">
<script src="https://code.highcharts.com/js/highcharts.js"></script>

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

JavaScript

$(function () {
    var chart = new Highcharts.Chart({
        chart: {
            renderTo: "container",
            type: "bar"
        },
        title: {
            useHTML: true,
            x: -10,
            y: 8,
            text: ''
        },
            credits: {
        enabled: false
    },
     exporting: {
        enabled: true
    },
   yAxis: {
        min: 0,
        max: 60,
        labels: {
            format: '{value}%'
        },
        title: {
            text: ''
        }
    },
    legend: {
        enabled: true,
        reversed: true
    },
     tooltip: {
        formatter: function () {
            return this.series.name +
                '<br><b>' + this.y + '%</b>';
        }
    },
   colors: ['#012169', '#00A3E0', '#007680', '#00ABAB', '#009A44', 
   '#C4D600', '#0076A8', '#012169', '#2C5234', '#C4D600'],
      

    series: [ {
        name: '2018',
        data: [
59,31,46,38,21,20,19,19,13,33,16,33
        ]
    },
{
        name: '2017',
        data: [
56,31,40,37,22,16,16,15,0,26,16,33
        ]
    }
],
        xAxis: {
            categories: [{
                name: "News",
                categories: ['Read the news','Watch video news stories on news apps']
            },
{
                name: "Video",
                categories: ['Watch short videos or live posts/stories','Watch videos shared on instant messaging networks','Watch virtual reality content','Watch live TV','Watch TV programmes on-demand via catch-up services','Stream films and/or TV series','Watch videos taken by me which are stored in a storage file']
            },
{
                name: "Music",
                categories: ['Stream/play music','Listen to online radio']
            },
{
                name: "Games",
                categories: ['Play games']
            }
            ]
        }
    });
});