JSFiddle - React, Tailwind, and code Playground

by anazimok

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: 700px; height: 500px; margin: 0 auto"></div>

JavaScript

$(function () {
    
        var colors = ["#00ff00", "#66ccff"]
            categories = ['Soft Skills', 'Hard Skills'],
            name = 'Career Skills',
            data = [{
                    y: 40,
                    color: colors[0],
                    drilldown: {
                        name: 'SoftSkills',
                        categories: ['Persistence', 
                                     'Multi-Tasks', 
                                     'Curiosity', 
                                     'Dedication',
                                     'Confidence'],
                        data: [5, 5, 10, 11, 9],
                        color: colors[0]
                    }
                }, {
                    y: 60,
                    color: colors[1],
                    drilldown: {
                        name: 'HardSkills',
                        categories: ['Assembly', 
                                     'Programming Structure & Logic', 
                                     'Reverse Engineering Concepts & Techniques', 
                                     'Reverse Engineering Tools', 
                                     'OS Structure & Internals'],
                        data: [5, 20, 15, 12, 8],
                        color: colors[1]
                    }
                }];
    
    
        // Build the data arrays
        var browserData = [];
        var versionsData = [];
    
        for (var i = 0; i < data.length; i++) {
    
            // add browser data
            browserData.push({
                name: categories[i],
                y: data[i].y,
                color: data[i].color
            });
    
            // add version data
            for (var j = 0; j < data[i].drilldown.data.length; j++) {
                var brightness = 0.1 - (j / data[i].drilldown.data.length) / 5 ;
                
                versionsData.push({
                    name: data[i].drilldown.categories[j],
                    y:...