Animation rendering fails into Pie Chart.

Do you want to request a feature or report a bug?

I would like to report a bug. Animation rendering fails into Pie Chart, there is space for improvement on the fallback.

What is the current behavior?

There is an intermittent failure on the chart rendering. As exposed on the gif below:

1. The first rendering works nicely as expected.
2. The second rendering (page reload) is intercepted somehow and a default rendering takes place removing the animation and the legend information.

If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem via https://jsfiddle.net or similar (template: http://jsfiddle.net/ndLhnegs/).

http://jsfiddle.net/lcustodio/x5x1de34/

What is the expected behavior?

The animation to always work, and if some error happens fallback like it’s the case currently, but the label and labelLine function should be called as well. In addition, some error logging in order to understand and try to solve the problem.

Which versions of Recharts, and which browser / OS are affected by this issue? Did this work in previous versions of Recharts?

All the tests were made with Chrome 62 + macOS 10.13.1

[CiroGomes]

Hello guys! On #1624 issue, @klarstrup gave a solution that worked for me. Apparently this problem happens in other types of graphic too, as in my case, was using Bar.

The solution, proposed by @klarstrup, was to put a key prop on the BarChart component, so when it changes, the whole graphic will re-render, with all the animations. I just put key={Math.random()}, so he always renders now 😃

[guvengorgun]

I ran into a similar issue too, and spent 5 hours to resolve it so I’ll try to help any future readers too.

@AlexMiroshnikov’s answer was really helpful and guided me to solution, so thx for that.

* For animation to be truly rendered, `renderSectorsWithAnimation` actually have to be called many times. The problem is that `renderSectorsStatically` is being called somehow when animation is already started with first `renderSectorsWithAnimation`and cancels all other `renderSectorsWithAnimation` calls and causes the fail of animation. I think this part is common in all of our problems.

* So in my situation, I was using the brand new React Hooks for the `PieChart` component and therefore had to use inline arrow functions for `onMouseEnter` props of `<Pie>` component:

    // FAILS ANIMATION
    const [activeIndex, setActiveIndex] = useState(-1)

    <Pie
        isAnimationActive={true}
        activeIndex={activeIndex}
        activeShape={renderActiveShape}
        dataKey="duration"
        data={data}
        onMouseEnter={()=> setActiveIndex(i)}>

And using this inline arrow function was causing a re-render on the component when data is not actually changed and it triggers a call to renderSectorsStatically. To avoid any confusion, it is not the onMouseEnter callback that causes renderSectorsStatically, just the fact that there is an inline arrow function causes an unneccesary re-render. You can google on this one or try to dig into React Hooks API useCallback to memoize this inline arrow function to avoid unneccesary re-renders. I solved my problem by getting rid of the inline arrow functions, or using a useCallback (just trying to stick with the new Hook thing)

    // RENDERS WITH ANIMATION
    const [activeIndex, setActiveIndex] = useState(-1),
        onMouseEnter = useCallback((_, i) => setActiveIndex(i), []);

    <Pie
        isAnimationActive={true}
        activeIndex={activeIndex}
        activeShape={renderActiveShape}
        dataKey="duration"
        data={data}
        onMouseEnter={onMouseEnter}>

So I don’t know if you are using any inline arrow functions or not, but try to find what triggers renderSectorsStatically call in your situation and get rid of that. Maybe providing a different prop than data to your chart component is causing a re-render?

I hope these tips help someone.

and huge thanks for the amazing library @xile611

I ran into the same issue with a similar configuration using React Hooks. After reading @loopbender s answer and understanding that re-render causes this problem, I just tried to making my hook component as a PureComponent using React.memo(...) then this resolved my issue. For example:

const ActiveShapePieChart = React.memo(props => {
    const [activeIndex, setActiveIndex] = useState(0);
    const onPieEnter = (data, index) => {
        setActiveIndex(index);
    };
    return (
            <PieChart width={width} height={height}>
                <Pie
                    ...
                </Pie>
            </PieChart>
     );
});

You can also see that all examples are implemented as a PureComponent on Recharts website. Hope this helps.