JSFiddle - React, Tailwind, and code Playground

by amrutaJgtp

HTML

<script src="http://code.highcharts.com/maps/highmaps.js"></script>
<script src="http://code.highcharts.com/mapdata/custom/world.js"></script>


<div id="container" style="max-width: 1000px" ></div>

JavaScript

$(function () {

       // Initiate the chart
    $('#container').highcharts('Map', {

        title: {
            text: 'GeoMaps'
        },

        mapNavigation: {
            enabled: true,
            buttonOptions: {
                verticalAlign: 'bottom'
            }
        },
        
        colorAxis: {
            dataClassColor: 'category',
                    dataClasses: [{
                        from: 0,
                        to: 25,
                        name:"low"
                    }, {
                        from: 26,
                        to: 50,
                        name:"medium"
                    }, {
                        from: 51,
                        to: 75,
                        name:"high"
                    }, {
                        from: 76,
                        to: 100,
                        name:"very high"
                    }]
                },
	
         plotOptions: {
            map: {
                allAreas: true,
                joinBy: ['iso-a2', 'code'],
                dataLabels: {
                    enabled: true,
                    color: 'white',
                    formatter: function () {
                        if (this.point.properties && this.point.properties.labelrank.toString() < 5) {
                            return this.point.properties['iso-a2'];
                        }
                    },
                    format: null,
                    style: {
                        fontWeight: 'bold'
                    }
                },
                mapData: Highcharts.maps['custom/world'],
                tooltip: {
                    headerFormat: '',
                    pointFormat: '{point.name}: <b>{series.name}</b>'
                }

            }
        },

        series: [{
            name: 'MR.A',
            data: $.map(['IN'], function (code) {
                return { code: code };
            })
        }, {
            name: 'MR.B',
          ...