[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.

[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]

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]

+1 for adding this feature!

Particularly for bar charts representing counts, it is desirable to drill-into the count to see the underlying data. This is possible through the dataSeries.itemClick event, but for stacked bar charts, clicking on the axisX label is a natural way of drilling into all the data associated with the bar.

[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