Simple Europe GeoJson

by kzoon

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/european-union.js"></script>

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

CSS

#container {
    height: 500px; 
    min-width: 310px; 
    max-width: 800px; 
    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 = [
    ['dk', 0],
    ['de', 1],
    ['fr', 2],
    ['ie', 3],
    ['es', 12],
    ['it', 14],
    ['gb', 5],  
    ['nl', 11],
    ['lu', 20],
    ['be', 22],
    ['pt', 22],
 
];

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


    colorAxis: {
        min: 0
    },

    series: [{
    allAreas:false,
        data: data,
         dataLabels: {
            enabled: true,
            format: '{point.name}'
        }
    }]
});