Highcharts Demo

author(s): Øystein Moseng Torstein Hønsi

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/proj4js/2.3.6/proj4.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/maps/modules/map.js"></script>
<script src="https://code.highcharts.com/maps/modules/exporting.js"></script>
<script src="https://code.highcharts.com/mapdata/countries/gb/gb-all.js"></script>
<div id="container"></div>

CSS

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

JavaScript

$(function () {

		// Allow lat/lon in map pies center option
		Highcharts.wrap(Highcharts.seriesTypes.pie.prototype, 'getCenter', function (proceed) {
    		var options = this.options, 
        		slicingRoom = 2 * (options.slicedOffset || 0);            
        if (options.center.lat !== undefined) {
    				var point = this.chart.fromLatLonToPoint(options.center);        		
        		options.center = [
          		chart.xAxis[0].toPixels(point.x, true),
          		chart.yAxis[0].toPixels(point.y, true)
        		];
        }
        var result = proceed.apply(this, Array.prototype.slice.call(arguments, 1));
        result[0] -= slicingRoom;
        result[1] -= slicingRoom;
        return result;
    });


    // Initiate the chart
    var chart = Highcharts.mapChart('container', {

        title: {
            text: 'Highmaps lat/lon demo'
        },

        tooltip: {
            headerFormat: '',
            pointFormat: '<b>{point.name}</b><br>Lat: {point.lat}, Lon: {point.lon}'
        },

				// Default options for the pies
				plotOptions: {
        		pie: {
            	size: 30,
              dataLabels: {
                enabled: false
              },
              tooltip: {
                  headerFormat: '',
                  pointFormat: '<b>{point.name}</b>: {point.y}'
              },
							events: {
              	// Add pie label
              	afterAnimate: function () {
                		var renderer = this.chart.renderer;
                    renderer.label(this.name, this.center[0] - 8, this.center[1] + 8).attr({
                			fill: 'rgba(255, 255, 255, 0.45)',
                      zIndex: 3,
                      r: 5
                    })
                		.css({
                			fontWeight: 'bold'
            				}).add();
                }
              }
           }
        },

        series: [{
            // Use the gb-all map with no data as a basemap
            mapData: Highcharts.maps['countries/gb/gb-all'],
     ...