You must be logged in to post your query.
Home › Forums › Chart Support › How to animate dynamic updates using React functional components?
Using React functional components, I have not been able to find a way to animate my chart with dynamic data received asynchronously. The sandbox below illustrates the problem with a timer simulating the asynchronous read.
https://codesandbox.io/s/basic-column-chart-in-react-canvasjs-0gfv6?fontsize=14&hidenavigation=1&theme=dark
FYI, this question is cross-posted to StackOverflow: https://stackoverflow.com/questions/59361744/how-to-animate-dynamic-updates-in-canvasjs-using-react-functional-components
@jaycincotta,
Chart animates only on the first / initial render, as of now. We will re-consider this behavior for future releases.
— Manoj Mohan Team CanvasJS
Does that mean that it is IMPOSSIBLE to have a React functional component animate on update? I’ve read the guidance that the chart would need to be recreated on each update so that the animation would occur on first render, but I don’t know how to achieve this with a functional component.
Could this sandbox be modified to show the proper technique? https://codesandbox.io/s/basic-column-chart-in-react-canvasjs-0gfv6?fontsize=14&hidenavigation=1&theme=dark
I was able to get the chart to animate ONCE by deferring the first render like this:
` return ( <div className=”App”> {!initialized && <h1>Loading…</h1>} {initialized && ( <CanvasJSChart containerProps={containerProps} options={options} /> )} </div> ); ` Running code is here.
But how to recreate the CanvasJS chart for animating subsequent updates?
This is only a partial solution. The root problem seems to be that within a React functional component, you can’t get the animation to re-render by calling the render method as you would in pure JS. I was able to work within that constraint to get animation on the initial load of dynamic data, but I’d still like a way to be able to animate subsequent updates.
Chart animates only on the first/initial render, as of now.
I’ve read the guidance that the chart would need to be recreated on each update so that the animation would occur on first render
To achieve the above requirement, you can destroy and re-create the chart as shown in this example.
—- Manoj Mohan Team CanvasJS
You must be logged in to reply to this topic. Login/Register