Highcharts Pie chart return slice animation on mouseout

Question

I am implementing an animated pie chart in Highcharts where the slices pull out on mouseover and all is good apart from a issue where the on mouseOut I want the slice to return to the 'closed' position.

This is the code for the animation and I have a clearTimeout on mouseOut however this is not returning the slice to the original position.

Is there an easy way of the chart to its original position.

I have a fiddle here...

http://jsfiddle.net/rupertito/Y3wvN/1/

   pie: {
       allowPointSelect: true,
                        stickyTracking: false,

                        point: {
                        events: {
                                    legendItemClick: function() {

                                            return false;

                                    },
                                    mouseOver: function(event) {
                                        var point = this;

                                        if (!point.selected) {                                                          
                                            timeout = setTimeout(function () {
                                                point.firePointEvent('click');

                                                sectors.tooltip.refresh(point);
                                            }, 20);
                                        }
                                    }
                                }


                            },
                        events: {
                            mouseOut: function() {
                                clearTimeout(timeout);

                            },

                        },

Hope this all makes sense and thanks for any help in advance.

Cheers Rob

score 6 · Answer 1 · answered May 21 '13 at 12:52

This is bug reported here. It's about not working slice for point. There is also workaround how avoid that issue. And simple example for you with mouseOver/mouseOut: http://jsfiddle.net/GqfU4/8/

function setTranslation(p, slice){
    p.sliced = slice;
    if(p.sliced){
        p.graphic.animate(p.slicedTranslation);
    } else {
        p.graphic.animate({
            translateX: 0,
            translateY: 0
        });
    } 
}

And for a pie:

            point: {
                events: {
                    mouseOut: function () {
                        setTranslation(this, false);
                    },
                    mouseOver: function() {
                        setTranslation(this, true);
                    }
                }
            },

Highcharts Pie chart return slice animation on mouseout

1 Answers1

Linked