European hexagon map

author(s): Mustapha Mekhatria

by mustapha mekhatria

HTML

<script src="https://code.highcharts.com/6.0.6/highcharts.js"></script>
<script src="https://code.highcharts.com/6.0.6/highcharts-more.js"></script>
<script src="https://cdn.rawgit.com/mekhatria/hexagon/master/hexagon.js"></script>
<div id="container" style="height: 460px; width:680px;"></div>
<script src="https://code.highcharts.com/modules/exporting.js"></script>

JavaScript

Highcharts.chart('container', {

  chart: {
    type: 'bubble',
    margin: [70, 70, 70, 70], //marginTop, marginRight, marginBottom and marginLeft
  },
  title: {
    text: 'European Countries'
  },
  subtitle: {
    text: 'Source: <a href="https://en.wikipedia.org/wiki/File:European_sub-regions_(according_to_EuroVoc,_the_thesaurus_of_the_EU).png">Wikipedia.org</a>'
  },

  plotOptions: {
    series: {
      marker: {
        lineColor: 'transparent',
      },
      dataLabels: {
        enabled: true, style: {
                    color: 'black',
                    textOutline: "0 0 0",
                    fontSize:"12px",
                    fontFamily: "Helvetica"
                },
        format: '{point.ISOAlpha3Code}'
      },
      marker: {
        symbol: 'hexagon'
      }
    }
  },
  tooltip: {
    formatter: function() {
      return '<b>' + this.point.ISOAlpha3Code + '.</b>: <br/>' + '- The <b>' + this.point.region + '</b> region.' + '<br/>- <b>' + this.point.capital + '</b> is the capital.';
    }
  },
  xAxis: {
    lineWidth: 0,
    minorGridLineWidth: 0,
    lineColor: 'transparent',
    labels: {
      enabled: false
    },
    minorTickLength: 0,
    tickLength: 0
  },
  yAxis: {

    gridLineWidth: 0,
    tickPositions: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
    lineWidth: 0,
    minorGridLineWidth: 0,
    lineColor: 'transparent',
    labels: {
      enabled: false
    },
    title: {
      text: null
    },
    minorTickLength: 0,
    tickLength: 0
  },
  legend: {
    enabled: false
  },
  series: [ {
    data: [{
      x: 12,
      y: 1,
      ISOAlpha3Code: "ALB",
      capital: "Tirana",
      color: "#fff176",
      region: "Southern Europe"
    },{
      x: 14,
      y: 1,
      ISOAlpha3Code: "GRC",
      capital: "Athens",
      color: "#fff176",
      region: "Southern Europe"
    },{
      x: 20,
      y: 1,
      ISOAlpha3Code: "CYP",
      capital: "Nicosia",
      color: "#fff176",
      region: "Southern Europe"
    }, {
     ...