CODEWITHSUNDEEP
highchartshighmaps
Vikas
Vikas

Reputation: 422

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.

Upvotes: 0

Views: 2469

Answers (4)

Martin Kosterman
Martin Kosterman

Reputation: 1

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
    }
}

Upvotes: 0

Justin Smith
Justin Smith

Reputation: 385

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.

Upvotes: 0

user2063210
user2063210

Reputation: 1

You could disable it, like this:

states: {
        hover: {
            enabled: false,
        }
    },

Upvotes: -1

Vikas
Vikas

Reputation: 422

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

Upvotes: 3

Related Questions