Grouped categories demo

author(s): Black Label

by Chitkala More

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"></div>

JavaScript

$(function () {

    var chart = new Highcharts.Chart({
        chart: {
            renderTo: "container",
            type: "column"
        },
        title: {
            useHTML: true,
            x: -10,
            y: 8,
            text: '<span class="chart-title"> Grouped categories <span class="chart-href"> <a href="http://www.blacklabel.pl/highcharts" target="_blank"> Black Label </a> </span> <span class="chart-subtitle">plugin by </span></span>'
        },
     series: [{
            data: [49.9, 71.5, 106.4, 129.2, 144.0,83.6, 78.8, 98.5, 93.4, 106.0],
          colorByPoint: true,
           /*  colors: ['#2f7ed8', '#0d233a', '#8bbc21', '#910000', '#1aadce',
                '#492970', '#f28f43', '#77a1e5', '#c42525', '#a6c96a', '#8bbc21', '#910000'] */
        }], 
    /*   series: [{
        name: 'Welmed',
        color: '#0066FF',       
        data: [49.9, 71.5 ]
          },{
        name: 'Humana',
        color: '#FF0000',
        data: [106.4, 129.2]
          },{
        name: 'Molina-UT',
        color: '#FF0000',
        data: [144.0,83.6]
          },{
        name: 'Trusted',
        color: '#FF0000',
        data: [ 78.8, 98.5]
          },{
        name: 'Aetna',
        color: '#FF0000',
        data: [93.4, 106.0 ]
          }], */
        xAxis: {
            categories: [{
                name: "Welmed",
                categories: ["Deven", "Carmin"]               
            }, {
                name: "Humana",
                categories: ["Timmothy", "Rory"]
            }, {
                name: "Molina-UT",
                categories: ["Boris", "Carmin"]
            }, {
                name: "Trusted",
                categories: ["Hilton", "Emie"]
            }, {
                name: "Aetna",
                categories: ["John", "Mary"]
            }]
        }
    });
    
    chart.setOptions({
    colors: ['#058DC7', '#50B432', '#ED561B', '#DDDF00', '#24CBE5', '#64E572', '#FF9655', '#FFF263', '#6AF9C4','#FF9655',...