moeTi moeTi - 5 months ago 41
CSS Question

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

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

hsh hsh
Answer

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