6
$('#container').highcharts('Map', {

        title : {
            text : 'Highmaps basic demo'
        },

        subtitle : {
            text : 'Source map: <a href="http://code.highcharts.com/mapdata/custom/africa.js">Africa</a>'
        },

        mapNavigation: {
            enabled: true,
            buttonOptions: {
                verticalAlign: 'bottom'
            }
        },

        colorAxis: {
            min: 0
        },

        series : [{
            data : data,
            mapData: Highcharts.maps['custom/africa'],
            joinBy: 'hc-key',
            name: 'Random data',
            states: {
                hover: {
                    color: '#BADA55'
                }
            },
            dataLabels: {
                enabled: true,
                format: '{point.name}'
            }
        }]
    });
});

http://jsfiddle.net/gh/get/jquery/1.11.0/highslide-software/highcharts.com/tree/master/samples/mapdata/custom/africa I am using this fiddle and I want to get the country name on click event on the country. Anybody can help me with the example or link to the API of this? I read the API but could not find, I guess I am missing some point. thanks in advance

Sohaib Ali
  • 81
  • 1
  • 3

1 Answers1

17

Pretty simple, just add this:

    plotOptions:{
        series:{
            point:{
                events:{
                    click: function(){
                        alert(this.name);
                    }
                }
            }
        }
    }

The this in the point scope represents the clicked point, therfore you have access to it's properties.

http://jsfiddle.net/farz5vq2/

MorKadosh
  • 5,846
  • 3
  • 25
  • 37
  • simple and efficient. – Gabriel Augusto Dec 14 '16 at 17:07
  • 3
    Also, [here](http://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/maps/plotoptions/series-point-events-click-url/)'s the highcharts demo demonstrating opening a url on clicking a map point. – Anupam Nov 13 '17 at 15:12
  • Is there a way to access the vue data properties within event scope Basically, If we have a data property in vue as selectedCountry which can be displayed as {{ selectedCountry }}, so is it possible to get and update it using this.selectedCountry = this.name ? – Singh Nov 30 '20 at 08:13