World continents - Highmaps

Highmaps demo

by Premchand R

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/world-continents.js"></script>

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

CSS

#container {
  height: 500px;
  min-width: 600px;
  max-width: 600px;
  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 = [
  ['eu', 13],
  ['oc', 12],
  ['af',8],
  ['as', 3]
];

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

  title: {
    text: ''
  },

  subtitle: {
    text: ''
  },

  mapNavigation: {
    enabled: true,
    buttonOptions: {
      verticalAlign: 'bottom'
    }
  },
  colorAxis: {
    min: 0
  },
  legend: {
    align: 'right',
    verticalAlign: 'top',
    layout: 'vertical',
    x: 0,
    y: 100
  },
   tooltip: {
    headerFormat: '{series.name}<br>',
    pointFormat: '{point.name}: <b>{point.value:1f}</b> applications are found<br/>'
  },
  series: [{
    data: data,
    name: 'Continent',
    states: {
      hover: {
        color: '#BADA55'
      }
    },
    dataLabels: {
      enabled: true,
      format: '{point.name}'
    }
  }]
});