recharts: Animation rendering fails into Pie Chart.

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 😃

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.

I don’t understand why the problem is still not fixed by authors of this library but it is closed… ridiculous @xile611 why did you close this if it is not fixed?!

I also facing the same issue. Exactly after facing data from internet using ‘redux-saga’, the animation stop immediately. I think it’s because react triggered re-render after props changed. But, when using ‘LineChart’ the animation works perfectly.

@lcustodio did you find how to handle this already?

edit: i found that isAnimationActive={false} is solved the issues on label/legends part not the animation part. end up not using animation for a while. ref: #829

Regarding the original (PieChart) problem - the reason is that src/polar/Pie.js::handleAnimationEnd() is not being called in case there is more than one pie chart on the page, meaning this component never gets state isAnimationFinished:true, which leads the labels not to appear.

UPD:

    if (nextProps.isAnimationActive !== this.props.isAnimationActive) {
      this.cachePrevData([]);
    } else if (nextProps.animationId !== animationId) {
      this.cachePrevData(sectors);
    }

• if to comment this piece, everything is fine. Otherwise the sectors are cached and in the following block:

    if (isAnimationActive && sectors && sectors.length &&
      (!prevSectors || !_.isEqual(prevSectors, sectors))) {
      return this.renderSectorsWithAnimation();
    }

    return this.renderSectorsStatically(sectors);

renderSectorsStatically is being called instead of renderSectorsWithAnimation which leads to unmounting of <Animate> and handleAnimationEnd() is not called.

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