React recharts pie chart problem with labels

user_13485090 0
Viewed 1685

I am using Class components in React and recharts library for showing recharts. I get data from parent component, format it in the child and everything works fine:

enter image description here

The problem is when I am resizing window, labels disappear:

enter image description here

I read that it is a problem with animation and I can fix it by just changing isAnimationActive={false} but what if I would like to leave the animation and fix this? I tried changing component to functional one, add React.memo, even added data={[name:'test', value: 1]} as a static data value but also didn't work. Any solutions? By the way I cannot understand why this issue was found on 2017 and still not fixed... what is wrong with the authors.

recharts reactjs charts javascript
1 Answers

Note: I'm assuming you've extended React.Component in your class - I can't confirm this as I don't have your code.

Be sure to extend React.PureComponent in your class instead of React.Component. This should fix the issue.

On the recharts documentation examples, you can see that all components extend React.PureComponent: https://recharts.org/en-US/examples

What appears to be happening is that React.Component is triggering renderings of the component that have not been accounted for in the recharts library, so handleAnimationEnd(), the function that displays the labels, is not being called.

You can read more information about the cause of the issue here: https://github.com/recharts/recharts/issues/1083

user_171404360
Related