Selected Points on series
HTML
<script src="https://code.highcharts.com/maps/highmaps.js"></script>
<script src="https://code.highcharts.com/maps/modules/data.js"></script>
<script src="https://code.highcharts.com/maps/modules/exporting.js"></script>
<script src="https://code.highcharts.com/mapdata/custom/world.js"></script>
<div id="container"></div>
<button id="getselectedpoints">Get selected points</button>
CSS
#container {
height: 500px;
min-width: 310px;
max-width: 800px;
margin: 0 auto;
}
.loading {
margin-top: 10em;
text-align: center;
color: gray;
}
JavaScript
$(function () {
$.getJSON('https://www.highcharts.com/samples/data/jsonp.php?filename=world-population-density.json&callback=?', function (data) {
// Initiate the chart
$('#container').highcharts('Map', {
title: {
text: 'Allow point select'
},
legend: {
title: {
text: 'Population density per km²'
}
},
plotOptions: {
//series: {
point: {
events: {
select: function () {
var text = 'Selected ' + this.name + ' (' + this.value + '/km²)',
chart = this.series.chart;
if (!chart.selectedLabel) {
chart.selectedLabel = chart.renderer.label(text, 0, 320)
.add();
} else {
chart.selectedLabel.attr({
text: text
});
}
},
unselect: function () {
var text = 'Unselected ' + this.name + ' (' + this.value + '/km²)',
chart = this.series.chart;
if (!chart.unselectedLabel) {
chart.unselectedLabel = chart.renderer.label(text, 0, 300)
.add();
} else {
chart.unselectedLabel.attr({
text: text
});
}
}
}
}
//}
...