JSFiddle - React, Tailwind, and code Playground

by sridhar reddy

HTML

<script src="http://code.highcharts.com/highcharts.js"></script>

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

<script src="http://code.highcharts.com/modules/exporting.js"></script>

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

JavaScript

$(function () {
    $('#container').highcharts({
        chart: {
            type: 'column'
        },
        title: {
            text: 'School results'
        },
        xAxis: {
//            categories: ['School 1', 'School 2', 'School 3'],
            categories: [{
                name: "School 1",
                categories: ["2014", "2013", "2012", "2011"]
            }, {
                name: "School 2",
                categories: ["2014", "2013"]
            }, {
                name: "School 3",
                categories: ["2012", "2011", "2010"]
            }],
            title: {
                text: null
            }
        },
        yAxis: {
            min: -20,
            max: 20
        },
        plotOptions: {
            bar: {
                negativeColor: '#FF0000',
                color: '#0000FF',
                dataLabels: {
                    enabled: true,
                    formatter: function () {
                       return this.y+' ('+this.series.name+')';
                    }
                }
            }
        },
        credits: {
            enabled: false
        },
        series: [
        {
            name: '2010',
            data: [null,null,-8]
        }, {
            name: '2011',
            data: [-4,null,12]
        }, {
            name: '2012',
            data: [2, null, 2]
        }, {
            name: '2013',
            data: [-3, -6, null]
        }, {
            name: '2014',
            data: [7, 4, null]
        }]
    });
});