Search code examples
highchartshighmaps

Highmaps hover effect/mouseout color change


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.


Solution

  • 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...!!!!