Multiple data classes

author(s): Torstein Hønsi

by Vignesh Gopalakrishnan

HTML

<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css">
<script src="https://code.highcharts.com/maps/highmaps.js"></script>
<script src="https://code.highcharts.com/mapdata/custom/world.js"></script>

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

CSS

#container {
    height: 500px; 
    min-width: 310px; 
    max-width: 800px; 
    margin: 0 auto; 
}
.main-container, .main-container * {
  box-sizing: border-box;
  margin:0;
  padding:0;
}
.custom-tooltip{
  background-color: red;
}

.highcharts-tooltip>span{
  background-color: transparent
}
.main-container{
  background-color:white;
  height: 100px;
  width: 100px;
  border-radius: 50%;
  position:relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.solar-icon{
  margin-top: 5px;
}

.solar-icon svg{
  height:20px;
  width:20px;
}
.school-icon svg{
  height:20px;
  width:20px;
}

.inner-container{
  height: 85px;
  width: 85px;
  background-color: #0b385f;
  color:#fff;
  border-radius: 50%;
  display:flex;
  flex-direction: column;
  justify-content:space-around;
  align-items:center; 
  font-size:9px;
}

.inner-container path{
  fill: white;
}
.horizontal-line{
  height:3px;
  width:100%;
  background-color:white;
}
.pointer{
   width: 0;
      height: 0;
      border-left: 5px solid transparent;
      border-right: 5px solid transparent;
      border-top: 30px solid white;
      position: absolute;
      bottom:-29px;
}

JavaScript

// Read the columns into the data array
var data = [{
  code: "DEU",
  value: 40,
  name: "Germany"
}, {
  code: "IND",
  value: 10,
  name: "India"
}, {
  code: "GBR",
  value: 100,
  name: "United Kingdom"
}];

// Initiate the chart
Highcharts.mapChart('container', {
  chart: {
    map: 'custom/world',
    borderWidth: 1,
    backgroundColor: "#0b385f",
    		events: {
			load: function()  {
				// change pointer reset prototype method behavior
				this.pointer.reset = () => {
					this.series.forEach((serie, i) => serie.setState('hover') );
					this.tooltip.refresh(this.series[0].data[0]);
					return undefined; // this will stop the pointer to hide tooltip when cursor exit the chart
				},
				// hover under the first serie
				this.series.forEach((serie, i) => serie.setState(i === 0 ?  'hover' :  'inactive') );
				this.tooltip.refresh(this.series[0].data[0]);
			}
		}
  },
  title: {
    text: null
  },
  mapNavigation: {
    enabled: false
  },
  exporting: {
    enabled: false
  },
  legend: {
    enabled: false
  },
  credits: {
    enabled: false
  },
  tooltip: {
    enabled: true,
    useHTML: true,
    borderRadius: 0,
    borderWidth: 0,
    borderColor:"transparent",
    backgroundColor:"transparent",
    shadow:false,
    formatter: function () {
    debugger
             return '<div class="main-container"> <div class="inner-container"> <div class="solar-icon"> <svg xmlns="http://www.w3.org/2000/svg" width="512" height="512" viewBox="0 0 128 128"><g><path...