Highcharts - change color while hovering over a slice in pie chart

Question

I have a simple pie chart that's green and I would like to change the slice color to red once you hover over it. I'm trying to do that with the API, but it's not working...

Here's the jsfiddle: http://jsfiddle.net/TdKGW/4/

Trying to do this via the states/hover method, but it's not working:

            states: {
                hover: {
                    brightness: 0,
                    color: 'red'                        
                }
            }

Any idea on how I can have the slice that you're hovering over (or mouseover) have a red fill? And it would change back to green once you mouseout.

Thanks

Ok so now I'm trying to do it like this: mouseOver: function() { this.series.data[this.x].update({ color: 'blue' });}. That does create a blue shading over it after mouseOver, but when I try the same for mouseOut it times out... how can I make this work? — Sayem Khan
can you update the jfiddle with the new code? what mouseOver are you using? — Maurizio In denmark

Sebastian Bochan Sebastian Bochan · Accepted Answer · 2013-08-08T10:01:52

You can catch mouseOver event on point and set fill, then catch mouseOut of series, and "recover color" by setting default.

plotOptions: {
            series: {
                states: {
                    hover: {
                        enabled: false
                    }
                },
                point: {
                    events: {
                        mouseOver: function () {
                            this.graphic.attr({
                                fill: 'red'
                            });
                        }
                    }
                },
                events: {
                    mouseOut: function () {
                        var serie = this.points;

                        $.each(serie, function (i, e) {
                            this.graphic.attr({
                                fill: '#CCCCCC'
                            });
                        });
                    }
                }
            }
        },

Example: http://jsfiddle.net/r6p7E/6/

Highcharts - change color while hovering over a slice in pie chart

1 Answers