JSFiddle - React, Tailwind, and code Playground

by kapil sharma

HTML

<script src="highmaps.js"></script>
<div id="kpk_map" class="ten columns" style="margin-top: 20px; width: 100%; border: 1px solid #E7E1E1; height: 500px"></div>

JavaScript

$(function () {

    // Initiate the chart
    $('#kpk_map').highcharts('Map', {
        chart : {
            borderWidth : 0
        },
        title : {
            text : 'Number of Seminars'
        },
        mapNavigation: {
            enabled: true
        },
        credits: {
            enabled: false
        },
        colorAxis: {
            min: 0,
            max: 26,
            step:2,
            minColor: '#26c40d',
            maxColor: '#e51414',
            align: 'top',
            reversed : false
        },
        tooltip: {
            formatter: function () {
                return '<b>District: ' + this.point.name + '</b><br>' +
                    this.series.name + ': ' + this.point.kpi_value + '<br>' +
                    'Rank: ' + this.point.rank;
            }
        },
        
        legend: {
            enabled: true,
            title: {
                text: 'District Rank',
                style: {
                    fontWeight: 'normal',
                    fontSize: '11px'
                }
                
            },
            align: 'left',
            layout: 'vertical'
        },
        series:[
            {
                "type": "map",
                "name": 'Value',
                dataLabels: {
                    enabled: true,
                    format: '<span style="font-weight:normal;">{point.name}</span>'
                },
                cursor: 'pointer',
                point: {
                    events: {
                        click: function () {
                            //$("#detailed_graph_loader").css("display", "block");
                            $.ajax({
                                type: "POST",
                                url: "get_district_detailed_graph.php",
                                data: { district_id: this.id, kpi_table: this.sector, date_from:this.date_from, date_to:this.date_to }
                            })
                           ...