Highmaps hover effect/mouseout color change - highcharts

Question

I want to disable the hover effect entirely
this is code a snippet
series : [{
data : data,
mapData: Highcharts.maps['custom/world'],
joinBy: ['iso-a2', 'code'],
name: 'Population density',
states: {
hover: {
enabled:false
}
},
tooltip: {
valueSuffix: '/km²'
}
}]
but still when I mouse out there is some color effect is there
here is a jsfiddle highmaps fiddle(please change the series options as above )
how to fix that color effect when mouse out happens from the map point, any help or reference will be appreciated.

Answer 1

After some struggle I got the solution of the above problem you just have to take the all the points object of the series data and on hover give them the same color as they are having currently, but you can not give the color directly like this
states: {
hover: {
color:this.color
}
},
Hence you can put some hack like this
$('#container').highcharts('Map', options);
var points = $('#container').highcharts().series[0].data;
for (var i = 0; i < points.length; i++) {
points[i].pointAttr.hover.fill = points[i].color;
}
and problem is solved...!!!!

Answer 2

Here's a solution without jquery:
const map = new Highcharts.Map(chartOptions);
(function() {
var points = map.series[0].data;
for (var i = 0; i < points.length; i++) {
points[i].pointAttr.hover.fill = points[i].color;
}
})();
Just pop this in after you instantiate your map.

Answer 3

The solutions of #Vikas did not work for me. pointAttr was not 'defined'.
Setting the hover color:null and brightness:0 worked for me:
states: {
hover: {
color: null, // Set no specific color to use original color
brightness: 0 // Prevent brightness effect
}
}

Answer 4

You could disable it, like this:
states: {
hover: {
enabled: false,
}
},