colorAxis long labels
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: 1000px;
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', 1008000],
['de', 1098000],
['fr', 2000000],
['ie', 2004654],
['es', 50454],
['it', 709879],
['gb', 40644],
['nl', 907987],
['lu', 2000000],
['be', 2042777],
['pt', 504544],
];
// Create the chart
Highcharts.mapChart('container', {
chart: {
map: 'custom/european-union',
plotBackgroundColor: '#4b96af'
},
legend: {
layout: 'vertical',
align: 'right',
//x: -50
},
colorAxis: {
labels: {
format: "{value:.,.0f}",
}
},
series: [{
allAreas: false,
data: data,
}]
});