JSFiddle - React, Tailwind, and code Playground

by amrutaJgtp

HTML

<script src="https://code.highcharts.com/maps/highmaps.js"></script>
<script src="https://code.highcharts.com/maps/modules/data.js"></script>
<script src="https://code.highcharts.com/mapdata/custom/europe.js"></script>
<div id="container" style="height: 500px; min-width: 310px; max-width: 480px; margin: 0 auto"></div>

JavaScript

$(function () {
    var UNDEFINED,
    stops = [
        [0.25, '#EC2500'],
        [0.5, '#ECE100'],
        [0.75, '#EC9800'],
        [1, '#9EDE00']
    ],
        distance = stops[1][0] - stops[0][0],
        modifiedStops = [];

    $.each(stops, function (i, stop) {
        modifiedStops.push([stop[0] - distance - 0.001, '#ffffff']);
        modifiedStops.push(stop);
        modifiedStops.push([stop[0] + 0.001, stop[1]]);
    });
    console.log(modifiedStops);
    var utcData = [{
        'code1': 'IE',
            'value': 2,
            'scale': 0
    }, {
        'code1': 'IS',
            'value': 4,
            'scale': 0
    }, {
        'code1': 'GB',
            'value': 6,
            'scale': 0
    }, {
        'code1': 'PT',
            'value': 8,
            'scale': 0
    }];

    var utc1Data = [{
        'code1': 'ES',
            'value': 2,
            'scale': 10
    }, {
        'code1': 'FR',
            'value': 4,
            'scale': 10
    }, {
        'code1': 'BE',
            'value': 6,
            'scale': 10
    }, {
        'code1': 'DE',
            'value': 8,
            'scale': 10
    }, {
        'code1': 'PL',
            'value': 5,
            'scale': 10
    }];



    var utc2Data = [{
        'code1': 'FI',
            'value': 2,
            'scale': 20
    }, {
        'code1': 'BY',
            'value': 4,
            'scale': 20
    }, {
        'code1': 'UA',
            'value': 6,
            'scale': 20
    }, {
        'code1': 'RO',
            'value': 8,
            'scale': 20
    }, {
        'code1': 'BG',
            'value': 5,
            'scale': 20
    }];


    var utc3Data = [{
        'code1': 'RU',
            'value': 4,
            'scale': 30
    }];

    var utc4Data = [{
        'code1': 'RU',

            'z': 10
    }, {
        'code1': 'FR',

            'z': 6
    }, {
        'code1': 'RO',

            'z': 7
    }, {
        'code1': 'GB',

            'z': 8
    }, {
       ...