<div id="ux4g-map"></div>

    
<script src="https://img1.digitallocker.gov.in/ux4g/UX4G@2.0/js/ux4g-map.js"></script>
<script src="https://img1.digitallocker.gov.in/ux4g/UX4G@2.0/js/ux4g-map-all.js"></script>

<script>
var data = [
    ['in-py', 0],
    ['in-ld', 1],
    ['in-wb', 2],
    ['in-or', 3],
    ['in-br', 4],
    ['in-sk', 5],
    ['in-ct', 6],
    ['in-tn', 7],
    ['in-mp', 8],
    ['in-2984', 9],
    ['in-ga', 10],
    ['in-nl', 11],
    ['in-mn', 12],
    ['in-ar', 13],
    ['in-mz', 14],
    ['in-tr', 15],
    ['in-3464', 16],
    ['in-dl', 17],
    ['in-hr', 18],
    ['in-ch', 19],
    ['in-hp', 20],
    ['in-jk', 21],
    ['in-kl', 22],
    ['in-ka', 23],
    ['in-dn', 24],
    ['in-mh', 25],
    ['in-as', 26],
    ['in-ap', 27],
    ['in-ml', 28],
    ['in-pb', 29],
    ['in-rj', 30],
    ['in-up', 31],
    ['in-ut', 32],
    ['in-jh', 33]
];

// Create the chart
UX4Gmap.mapChart('ux4g-map', {
    chart: {
        map: 'countries/in/in-all', 
    },

    title: {
        text: ''  
    },

    subtitle: {
        text: ''  
    },

    legend: {
        enabled: false  
    },

    tooltip: {
        useHTML: true,  
        headerFormat: '',  
        pointFormat: `<div style="color: white; background-color: #212121; padding: 4px 8px; border-radius: 6px; position: relative;">
            {point.name}
            <div style="width: 0; height: 0; border-left: 8px solid transparent; border-right: 8px solid transparent; border-top: 8px solid #212121; margin: 0 auto; position: absolute; left: 50%; transform: translateX(-50%); bottom: -8px;"></div>
        </div>`,
        backgroundColor: null  
    },

    navigation: {
        buttonOptions: {
            enabled: false  
        }
    },

    credits: {
        enabled: false  
    },

    series: [{
        data: data,
        allowPointSelect: true,
        cursor: 'pointer',
        color: '#FBF2FF',  
        borderColor: '#AC99F3',  
        borderWidth: 1,   
        states: {
            hover: {
                borderColor: '#774BFF'  
            },
            select: {
                color: '#774BFF'
            }
        },
        dataLabels: {
            enabled: false,  
        }
    }]
});

</script>
    
    

    
    #ux4g-map {
        height: 500px; 
        min-width: 310px; 
        max-width: 800px; 
        margin: 0 auto; 
    }