JSFiddle - React, Tailwind, and code Playground

by Shestac92

HTML

<script src="https://cdn.anychart.com/js/latest/anymap.min.js"></script>
<script src="https://cdn.anychart.com/geodata/1.2.0/custom/world_source/world_source.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/proj4js/2.3.15/proj4.js"></script>
<link rel="stylesheet" href="https://cdn.anychart.com/css/7.14.3/anychart-ui.min.css">
<div id="container"></div>

CSS

html, body, #container {
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
        }

JavaScript

anychart.onDocumentReady(function() {

    // create data set
    var dataSet = anychart.data.set(getData());

    //create chart
    europeMap = anychart.map();
    europeMap.geoData(anychart.maps.world_source);

    // set the series
    var series = europeMap.choropleth(dataSet);

    // disable labels
    series.labels(false);
    europeMap.title({text : "Europe", fontSize : 35, fontColor: "#64b5f6"});

    
    europeMap.grids(true);

    //set axes
    mapAxes = europeMap.axes();
    mapAxes.top(true);
    mapAxes.left(true);

    mapScale = europeMap.scale();

    // Set borders of region
    mapScale.maximumX(69);
    mapScale.minimumX(-25);
    mapScale.maximumY(72);
    mapScale.minimumY(36);

    // set the container
    europeMap.container('container');
    europeMap.draw();
});

function getData() {
    return [
        {'id': 'AO', 'value': 1},
        {'id': 'AL', 'value': 2},
        {'id': 'AE', 'value': 3},
        {'id': 'AR', 'value': 4},
        {'id': 'TF', 'value': 6},
        {'id': 'AU', 'value': 7},
        {'id': 'AT', 'value': 8},
        {'id': 'BI', 'value': 10},
        {'id': 'BE', 'value': 11},
        {'id': 'BJ', 'value': 12},
        {'id': 'BF', 'value': 13},
        {'id': 'BD', 'value': 14},
        {'id': 'BG', 'value': 15},
        {'id': 'BA', 'value': 16},
        {'id': 'BY', 'value': 17},
        {'id': 'BZ', 'value': 18},
        {'id': 'BO', 'value': 19},
        {'id': 'BR', 'value': 20},
        {'id': 'BN', 'value': 21},
        {'id': 'BT', 'value': 22},
        {'id': 'BW', 'value': 23},
        {'id': 'CF', 'value': 24},
        {'id': 'CA', 'value': 25},
        {'id': 'CH', 'value': 26},
        {'id': 'CL', 'value': 27},
        {'id': 'CN', 'value': 28},
        {'id': 'CI', 'value': 29},
        {'id': 'CM', 'value': 30},
        {'id': 'Cyprus_U.N._Buffer_Zone', 'value': 31},
        {'id': 'CD', 'value': 32},
        {'id': 'CG', 'value': 33},
        {'id': 'CO', 'value': 34},
        {'id': 'CR',...