European Union - point names

Highmaps demo

by kzoon

HTML

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

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

CSS

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

JavaScript

var data = [{
    code: 'DE',
    value: 25,
    myName: 'XXXXXXXXX'
  
  }, {
    code: 'FR',
    value: 10,
    myName: 'YYYYYYYY',
  },
  {
    code: 'NL',
    value: 45,
    myName: 'ZZZZZZZZZ',
  }, {
    code: 'BE',
    value: 8,
    myName: 'FRIES-FRIES-FRIES',
  },
];


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

  title: {
    text: 'Highmaps basic demo'
  },


  mapNavigation: {
    enabled: true,
    buttonOptions: {
      verticalAlign: 'bottom'
    }
  },

  colorAxis: {
    min: 0
  },

  series: [{
    joinBy: ['iso-a2', 'code'],
    allAreas: false,
    data: data,
    name: 'Random data',
    states: {
      hover: {
        color: '#BADA55'
      }
    },
    dataLabels: {
      enabled: true,
      format: '{point.myName}'
    }
  }]
});