Format datalabel

by kzoon

HTML

<script src="https://code.highcharts.com/maps/highmaps.js"></script>
<script src="https://code.highcharts.com/maps/modules/exporting.js"></script>
<script src="https://code.highcharts.com/mapdata/custom/european-union.js"></script>

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

CSS

#container {
    height: 500px; 
    min-width: 310px; 
    max-width: 800px; 
    margin: 0 auto; 
}
.loading {
    margin-top: 10em;
    text-align: center;
    color: gray;
}

JavaScript

// Prepare demo data
// Data is joined to map using value of 'hc-key' property by default.
// See API docs for 'joinBy' for more info on linking data and map.
var data = [
  ['dk', 0],
  ['de', 1],
  ['fr', 2],
  ['ie', 3],
  ['es', 12],
  ['it', 14],
  ['gb', 5],
  ['nl', 11],
  ['lu', 20],
  ['be', 22],
  ['pt', 22],

];

var myFormatter = function() {
  return  this.point.name + ' ' + this.point.value;
}

// Create the chart
Highcharts.mapChart('container', {
  chart: {
    map: 'custom/european-union'
  },


  colorAxis: {
    min: 0
  },

  series: [{
    allAreas: false,
    data: data,
    dataLabels: {
      enabled: true,
      formatter: this.myFormatter,
    }
  }]
});