JSFiddle - React, Tailwind, and code Playground

by Milind Mehta

HTML

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

<div id="container" style="width: 600px; height: 400px; margin: 0 auto"></div>

JavaScript

$(function () {

    var colors = Highcharts.getOptions().colors,
        categories = ['Project 1', 'Project 2', 'Project 3', 'Project 4', 'Project 5'],
        data = [{
            y: 20,
            color: colors[1],
            drilldown: {
                name: 'Project 1 Issues',
                categories: ['Issue 11', 'Issue 22', 'Issue 33', 'Issue 44'],
                data: [5, 5, 5, 5],
                color: colors[1]
            },
             progress: {
                name: 'Project 1 Progress',
                categories: ['25%', '50%', '75%', '100%'],
                data: [5, 5, 5, 5],
                color: colors[2]
            }
         
        }, {
            y: 20,
            color: colors[7],
            drilldown: {
               name: 'Project 2 Issues',
                categories: ['Issue 21', 'Issue 22', 'Issue 33', 'Issue 44'],
               data: [5, 5, 5, 5],
                color: colors[7]
            },
             progress: {
                name: 'Project 2 Progress',
                categories: ['25%', '50%', '75%', '100%'],
                data: [5, 5, 5, 5],
                color: colors[2]
            }
            
        }, {
            y: 20,
            color: colors[3],
            drilldown: {
                name: 'Project 3 Issues',
                categories: ['Issue 31', 'Issue 32', 'Issue 33', 'Issue 34'],
                 data: [5, 5, 5, 5],
                color: colors[3]
            },
             progress: {
                name: 'Project 3 Progress',
                categories: ['25%', '50%', '75%', '100%'],
                data: [5, 5, 5, 5],
                color: colors[2]
            }
        }, {
            y: 20,
            color: colors[4],
            drilldown: {
               name: 'Project 4 Issues',
                categories: ['Issue 41', 'Issue 42', 'Issue 43', 'Issue 44'],
                data: [5, 5, 5, 5],
                color: colors[4]
            },
            ...