How to animate dynamic updates using React functional components?

[JayCincotta]

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

[JayCincotta]

FYI, this question is cross-posted to StackOverflow:
https://stackoverflow.com/questions/59361744/how-to-animate-dynamic-updates-in-canvasjs-using-react-functional-components

[Manoj Mohan]

@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

[JayCincotta]

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

[JayCincotta]

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?

[JayCincotta]

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.

[Manoj Mohan]

@jaycincotta,

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