Comments (5)
The issue seems to be related to the frequency in which your parent component needs to rerender, or possibly how often your data array reference changes. The workaround seems to be to do two things:
- Force your chart to rerender when your parent component re-renders
- Ensure your parent component does not rerender during the animation if possible. For me, I found that a parent component issue was causing my chart to rerender too often. That fix is not shown here.
I set a unique key on the Chart or ResponsiveContainer
that forces the chart to rerender when the parent component rerenders. This can lead to issues with your chart reanimating on each rerender, which may not be your desired effect. Here is how I worked that out. Note that I'm turning off animations after a timeout to prevent duplicate animations after the key change. You would think that I could simply turn the animation off at onAnimationEnd
but that callback seems to be called before the animation actually ends for some reason. It's also possible that your component will never actually finish the animation if this bug does happen to occur during the animation. I had better luck with the following approach:
const RingChart = ({data, colors, angle = 140}) => {
let [animate, setAnimate] = useState(true)
const onAnimationStart = useCallback(() => {
setTimeout(() => {
setAnimate(false)
}, 2000)
}, [])
return (<div>
<div ref={ref} className={"absolute w-grid-7 h-grid-1 l-grid-7 t-grid-7"}/>
<ResponsiveContainer key={uniqid()}>
<PieChart>
<Pie
isAnimationActive={animate}
data={data}
startAngle={angle}
endAngle={angle + 360}
cx={'50%'}
cy={'50%'}
outerRadius={'70%'}
innerRadius={'47%'}
fill="#8884d8"
dataKey="value"
paddingAngle={0}
labelLine={<LabelLine/>}
label={<Label/>}
onAnimationStart={onAnimationStart}
>
{data.map((entry, index) => (
<Cell key={`cell-${index}`} fill={colors[index % colors.length]} stroke="none"/>
))}
</Pie>
</PieChart>
</ResponsiveContainer>
</div>
)
}
from react-smooth.
It's worth noting that when the Animate
component unmounts, it does not call onAnimationEnd
. This makes it impossible for recharts
to clean up any outstanding animations when Animate
unmounts.
Perhaps there could be an onAnimationStopped
prop to address cases where the AnimateManager
is stopped abruptly.
from react-smooth.
Merged #80 which calls onAnimationEnd
on unmount - this should solve part of this
from react-smooth.
any updates ?
from react-smooth.
We would love a contribution from your side @pl12133 , calling the onAnimationEnd on unmount
from react-smooth.
Related Issues (20)
- Recharts breaking our build HOT 11
- Not working at all HOT 1
- Animation breaks because of NaN in easing HOT 2
- Package have React deprecation warnings
- react-addons-transition-group is deprecated
- easing bugs HOT 4
- not working react 16 HOT 1
- Uncaught Error: Cannot find module "react-transition-group/Transition" HOT 1
- ease animation from right end of the screen
- Update simple example in README
- Latest version 1.0.1 has a syntax error and will not run HOT 4
- Repeated calls to `setState`` HOT 1
- Support react-transition-group 4.x HOT 1
- Avoid importing all of Lodash for only 2 functions HOT 4
- Can it be used with recharts for custom animations ?
- Update to react v17 support HOT 2
- Legend shows issue in recharts piechart with responsive container HOT 3
- React 18 support HOT 6
- New object comparison using the "!==" operator is always true
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from react-smooth.