World Map data label translation in map - Javascript highcharts

Javascript examples for highcharts:Chart Label

  1. HOME
  2. Javascript
  3. highcharts
  4. Chart Label

Description

World Map data label translation in map

Demo Code

ResultView the demo in separate window 

<html>
   <head> 
      <title>Highcharts Demo</title> 
      <meta name="viewport" content="width=device-width, initial-scale=1"> 
      <style id="compiled-css" type="text/css">

#container {//ww  w.  j  a  v a 2s  .  c  om
   height: 500px;
   width: 800px;
   margin: 0 auto;
}
.highcharts-tooltip>span {
   padding: 10px;
   white-space: normal !important;
   width: 200px;
}
.loading {
   margin-top: 10em;
   text-align: center;
   color: gray;
}
.f32 .flag {
   vertical-align: middle !important;
}


      </style> 
   </head> 
   <body> 
      <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> 
      <div id="container"></div> 
      <script type="text/javascript">
function translate(englishName) {
  if (englishName === "Russia") {
    return "Rosja"; // translated
  }
  return englishName;
}
$.getJSON('https://www.highcharts.com/samples/data/jsonp.php?filename=world-population-density.json&callback=?', function(data) {
  // Initiate the chart
  Highcharts.mapChart('container', {
    mapNavigation: {
      enabled: true
    },
    series: [{
      data: data,
      mapData: Highcharts.maps['custom/world'],
      joinBy: ['iso-a2', 'code'],
      name: 'Population density',
      dataLabels: {
        enabled: true,
        formatter: function() {
          return translate(this.point.name);
        }
      }
    }]
  });
});

      </script>  
   </body>
</html>

Related Tutorials