Home forums Using CanvasJS How to animate dynamic updates using React functional components?

Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • #27715

    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

    #27716
    #27742

    @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

    #27766

    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

    #27771

    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?

    #27839

    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.

    #27848

    @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

Viewing 7 posts - 1 through 7 (of 7 total)

You must be logged in to reply to this topic.