Custom Cursor in Highmaps when no data is available for hovered country

Question

I'm using Highcharts with Highmaps to display country information. My world map is initialized as follows:

data.series[0].data = {...}; // array with 135 entries     
data.series[0].mapData = Highcharts.maps['custom/world']; // world map with 213 countries
data.series[0].point.events.click = function(){ //do something };

Everything is working fine, data is displayed and onClick handler is working too. To show users that countries are clickable, I set the cursor to be the hand icon:

data.plotOptions.series.cursor = "pointer";

Now the problem. Sometimes I don't have data for all countries, so the "empty" countries are not clickable. Highmaps does not fire an event when I click the country, but I also want to overwrite the cursor for those countries.

How can I set a custom cursor if no value exists for the given point?

Highcharts v4.2.5

Answer 1

You can use

plotOptions.series.point.events.mouseOver event

and

plotOptions.series.point.events.mouseOut event.

plotOptions: {
         series: {
             point: {
                events: {
                    mouseOver: function () {

                        $("#container").addClass("cursor");
                    },
                    mouseOut: function () {

                        $("#container").removeClass("cursor");
                    }
                }
            },
         }
}

by doing this no event triggers on areas that has no value. you should also remove plotOptions.series.cursor = "pointer";

A Working Sample On Fiddle