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" class="chart-container" style="min-width: 310px; max-width: 600px; height: 500px; margin: 0 auto;"></div>

JavaScript

$(function () {

    var chart = new Highcharts.Chart({
        chart: {
            renderTo: "container",
            type: "bar"
        },
        title: {
            useHTML: true,
            x: -10,
            y: 8,
            text: ''
        },
   colors: ['#86BC25', '#43B02A', '#046A38', '#0097A9', '#62B5E5', 
   '#00A3E0', '#0076A8', '#012169', '#2C5234', '#C4D600'],
      plotOptions: {
        series: {
            stacking: 'normal'
        }
    },

    series: [{
        name: 'At least once a week',
        data: [
4,
9,
21,
36,
8,
5,
5,
11,
20,
27,
35,
3,
5,
6,
4,
5
        ]
    }, {
        name: 'At least once a month',
        data: [
4,
14,
15,
9,
7,
7,
13,
23,
21,
23,
18,
6,
4,
6,
5,
6
        ]
    }, {
        name: 'Less often',
        data: [
7,
13,
10,
7,
13,
15,
26,
18,
20,
17,
15,
9,
9,
8,
12,
9
        ]
    }, {
        name: 'Never',
        data: [
84,
62,
53,
46,
70,
71,
55,
46,
37,
32,
31,
80,
80,
77,
77,
78
        ]
    }, {
        name: 'Do not know',
        data: [
2,
2,
1,
1,
2,
2,
2,
1,
1,
1,
1,
2,
2,
2,
2,
2

        ]
    }],
        xAxis: {
            categories: [{
                name: "Finance",
                categories: ['Transfer money to someone in different country',
'Transfer money to someone in your country',
'Other online banking transactions',
'Check bank balances']
            }, {
                name: "Shopping",
                categories: ['Interact with businesses via messenger apps',
'Make an online purchase of a service',
'Make reservations/bookings',
'Make an online purchase of a product',
'Read reviews about a product/service',
'Research a product/service',
'Browse shopping websites/apps']
            }, {
                name: "Payment",
                categories: ['Pay for a taxi',
'Pay for public transport',
'Pay for a product/service in-store',
'Pay for car parking']
            }, {
                name: "Other",
                categories: ['Place or redeem a bet/gambling']
      ...