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: #333F51;
    border: 1px solid silver;
    
    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: `<div style="width: 200px;color: white; display: flex;justify-content: space-between; flex-direction: row; flex-wrap: wrap">
  <div style=" flex-direction: column; display: flex; flex-basis:30%; align-items: center">
    <div style="color: #3FA9F5">102</div>
    <div>Total Plan</div>
  </div>
  <div style=" flex-direction: column; display: flex; flex-basis:30%; align-items: center">
    <div style="color: #7AC943">88</div>
    <div>Actual</div>
  </div>
  <div style=" flex-direction: column; display: flex; flex-basis:30%">
    <div style="color: #FF931E">16</div>
    <div>Unplaned</div>
  </div>
  <div style=" flex-direction: column; display: flex; flex-basis:30%">
    <div style="color: #FF1D25">20</div>
    <div>&lt;50%</div>
  </div>
  <div style=" flex-direction: column; display: flex; flex-basis:30%">
    <div style="color: #FF931E">74</div>
    <div>&gt;50%</div>
  </div>
  <div style=" flex-direction: column; display: flex; flex-basis:30%">
    <div style="color: #7AC943">160</div>
    <div>&gt;80%</div>
  </div>
</div>`
        },

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

        series: [{
            data: data,
            color: 'white',
            mapData: Highcharts.maps['custom/world'],
            joinBy: ['iso-a2', 'code'],
            name: 'Population density',
            
      ...