TypeScript

by kunwalle

HTML

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<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/maps/modules/exporting.js"></script>
<script src="https://code.highcharts.com/mapdata/custom/world.js"></script>

<!-- Flag sprites service provided by Martijn Lafeber, https://github.com/lafeber/world-flags-sprite/blob/master/LICENSE -->
<link rel="stylesheet" type="text/css" href="https://cloud.github.com/downloads/lafeber/world-flags-sprite/flags32.css" />


<div id="container"></div>

CSS

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

.highcharts-tooltip>span {
    background: white;  
    border-radius: 3px;
    box-shadow: 1px 1px 2px #888;
    padding: 8px;
}

.loading {
    margin-top: 10em;
    text-align: center;
    color: gray;
}

.f32 .flag {
    vertical-align: middle !important;
}

TypeScript

$.getJSON('https://cdn.rawgit.com/highcharts/highcharts/680f5d50a47e90f53d814b53f80ce1850b9060c0/samples/data/world-population-density.json', function (data) {

    // Add lower case codes to the data set for inclusion in the tooltip.pointFormat
 
    // Initiate the chart
    Highcharts.mapChart('container', {

        title: {
            text: 'Full HTML tooltip'
        },

     


        tooltip: {
            backgroundColor: null,
            borderWidth: 0,
            boderColor:'red',
            shadow: false,
            shape: 'square',
            useHTML: true,
            pointFormat: '{point.name}'
        },

        colorAxis: {
            min: 1,
            max: 1000,
            type: 'logarithmic'
        },

        series: [{
            data: [{
		"code3": "MYS",
		"name": "Malaysia",
		"value": 94.92,
		"code": "MY"
	},
  {
		"code3": "MEX",
		"name": "Mexico",
		"value": 65.61,
		"code": "MX"
	},
  {
		"code3": "DZA",
		"name": "Algeria",
		"value": 17.05,
		"code": "DZ"
	},
  {
		"code3": "NGA",
		"name": "Nigeria",
		"value": 204.21,
		"code": "NG"
	},],
            mapData: Highcharts.maps['custom/world'],
            joinBy: ['iso-a2', 'code'],
            name: '&nbsp;'
        }]
    });
});