JSFiddle - React, Tailwind, and code Playground

by Zaheer Ahmed

HTML

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

<div id="con1" style="min-width: 400px; height: 400px; margin: 0 auto"></div>

JavaScript

$(function () {
        var chart;
        $(document).ready(function () {
            var colors = Highcharts.getOptions().colors,
            categories1 = ['1011', '1112', '1213', '1415'],
            name1 = 'Actual',

            data1 = [
{
     y: 1674,
     color: colors[0],
     drilldown: {
         name: '1011 Actual',
         categories: ['BS', 'B', 'IT', 'C'],
         data: [3, 32, 54, 50],
                 
         color: colors[0],
         
         name1: '1011 Target',
         data1: [0, 31, 50, 60],
         color1:colors[1]
     }
 }
];            var colors = Highcharts.getOptions().colors,
            categories2 = ['1011', '1112', '1213', '1415'],
            name2 = 'Target',

            data2 = [  
{
     y: 1633,
     color: colors[1],
     drilldown: {
          name: '1011 Actual',
         categories: ['BS', 'B', 'IT', 'C'],
         data: [3, 32, 54, 50],
                
         color: colors[0],
         
         name1: '1011 Target',
         data1: [0, 31, 50, 60],
         color1:colors[1]
     }
 }
];            function setChart(name, categories, data, color) {
                console.log(name, categories, data, color);
                chart.xAxis[0].setCategories(categories);
                while (chart.series.length > 0) {
                    chart.series[0].remove(true);
                }
                for (var i = 0; i < data.length; i++) {
                    chart.addSeries({
                        name: name[i],
                        data: data[i],
                        color: color[i]
                    });
                    
                }
            }
            chart = new Highcharts.Chart({
                chart: {
                    renderTo: 'con1',
                    type: 'column'
                },
                title: {
                    text: 'Learner Responsive 16-18'
                },
                subtitle: {
                    text: 'Click the columns to view breakdown by...