JSFiddle - React, Tailwind, and code Playground

by Joanna Sobańska

HTML

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://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 = ['Europe', 'South East Asia', 'South America', 'North Africa', 'Others'],
        data = [{
            y: 56.33,
            color: colors[0],
            drilldown: {
                name: 'Europe',
                categories: ['Poland', 'Romania', 'UK', 'Germany','Spain', 'France'],
                data: [1.06, 0.5, 17.2, 8.11, 5.33, 24.13],
                color: colors[0]
            }
        }, {
            y: 10.38,
            color: colors[1],
            drilldown: {
                name: 'South East Asia',
                categories: ['Indonesia','Thailand','Maleysia'],
                data: [2,5,3.38],
                color: colors[1]
            }
        }, {
            y: 24.03,
            color: colors[2],
            drilldown: {
                name: 'South America',
                categories: ['Argetina','Brasil','Chile', 'Uruguay', 'Colombia','Peru'
                    ],
                data: [8,4,6,1.03,1,4],
                color: colors[2]
            }
        }, {
            y: 4.77,
            color: colors[3],
            drilldown: {
                name: 'North Africa',
                categories: ['Algeria','Egypt','Morocco'],
                data: [1.77,1,2],
                color: colors[3]
            }
        }, {
            y: 0.91,
            color: colors[4],
            drilldown: {
                name: 'Others',
                categories: ['Others'],
                data: [0.91],
                color: colors[4]
            }
        }, {
            y: 0.2,
            color: colors[5],
            drilldown: {
                name: 'Proprietary or Undetectable',
                categories: [],
                data: [],
                color: colors[5]
            }
        }],
        browserData = [],
        versionsData = [],
        i,
        j,
        dataLen = data.length,
        drillDataLen,
        brightness;


...