Highcharts Demo

author(s): Torstein Hønsi

HTML

<script src="https://code.highcharts.com/maps/highmaps.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/offline-exporting.js"></script>
<script src="https://code.highcharts.com/mapdata/custom/europe.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/proj4js/2.4.4/proj4-src.js"></script>

<div id="container" style="height: 500px; min-width: 310px; max-width: 600px; margin: 0 auto"></div>

JavaScript

// Instantiate the map
Highcharts.mapChart('container', {
  chart: {
    map: 'custom/europe',
    borderWidth: 1,
    zoomType: 'xy',
    events: {
      selection(e) {
        var chart = this
        var xAxis = chart.xAxis[0]
        var yAxis = chart.yAxis[0]
        var point = chart.series[1].points[0]
        var image = point.graphic
        var initImageSize = {
          w: image.imgwidth,
          h: image.imgheight,
          transX: image.translateX,
          transY: image.translateY
        }
        var setImageSize = function(image, width, height) {
          image.element.attributes.width.value = width
          image.element.attributes.height.value = height
        }
        var translateImage = function(image, x, y) {
        	image.translate(x, y)
        }
        console.log(image)
        // If zooming
        if (e.originalEvent) {
					var currentImageSize = {
          	w: parseInt(image.element.attributes.width.value),
            h: parseInt(image.element.attributes.height.value)
          }
          var selectRectDimensions = e.originalEvent && e.originalEvent.path[0].getBBox()
          var selectRect = {
            w: selectRectDimensions.width,
            h: selectRectDimensions.height,
          }
          var scale = selectRect.w >= selectRect.h ? xAxis.len / selectRect.w : yAxis.len / selectRect.h
					// Resize image
          setImageSize(image, currentImageSize.w * scale, currentImageSize.h * scale)
          // Translate image
          image.translate(-((currentImageSize.w * scale) / 2), -((currentImageSize.h * scale) / 2))
          
          // Zoom out
        } else {
        		// Get back to initial size and translate values.
						setImageSize(image, initImageSize.w, initImageSize.h)
						image.element.attributes.transform.value = "translate(" + -initImageSize.w / 2 + "," + -initImageSize.h / 2 + ")"
        }

      }
    }
  },

  title: {
    text: 'Zoom Chart'
  },

  legend: {
    enabled: false
  },

 ...