JSFiddle - React, Tailwind, and code Playground

by NesterOne

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

JavaScript

$(function () {
    
        var colors = Highcharts.getOptions().colors,
            categories = ['JavaScript', 'Java'],
            name = 'Commits per language',
            data = [{
                    y: 1026,
                    color: colors[0],
                    drilldown: {
                        name: 'JavaScript',
                        categories: ['Visualize', 'Dashboard', 'AdhocView'],
                        data: [366, 219, 441],
                        color: colors[0]
                    }
                }, {
                    y: 271,
                    color: colors[1],
                    drilldown: {
                        name: 'Java',
                        categories: ['Visualize', 'Dashboard', 'AdhocView'],
                        data: [112, 85, 74],
                        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.2 - (j / data[i].drilldown.data.length) / 5 ;
                versionsData.push({
                    name: data[i].drilldown.categories[j],
                    y: data[i].drilldown.data[j],
                    color: Highcharts.Color(data[i].color).brighten(brightness).get()
                });
            }
        }
    
       console.log(browserData);
     console.log(versionsData);
    
        // Create the chart
        $('#container').highcharts({
            chart: {
                type: 'pie'
            },
            title: {
                text: 'Commits per language for main projects in 5.6'
            },
  ...