Home forums Chart Support How to Re render with animation

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

    I’m updating dataPoints dynamically based on some dropdown, When I do that animation is not coming. How do I re render with animation?



    To render the chart each time with animation, you should create a new chart with updated options. Please take a look at this jsFiddle.

    Bivek Singh

    • This reply was modified 3 years, 10 months ago by Bivek Singh.

    Hi @bivek,

    I instantiate my chart before populating my datapoints, which are set after an ajax request.
    At that moment, I render the chart instance and then set the dataPoints.
    Even in the first moment, the chart isn’t being loaded in animation mode. The animationEnabled option is set to true.
    I did it only if I instantiate the chart after setting the datapoints to an option object and instante (and render) the respective chart. Is that still the only possibility to have the animation working?

    Thanks, Guilherme



    Can you please create a JSFiddle reproducing the issue you’re facing so that we can look into the code, understand it better and help you out?

    Shashi Ranjan
    Team CanvasJS


    Hello @shashi!

    That’s what I have implemented:
    jsfiddle today (not working)

    That’s how it works (I need to have my dataPoints set before rendering):
    jsfiddle (that works)

    This is what I’d like to do. Set animationEnabled after the dataPoints. I thought it’d work because after the addTo method, the chart is rendered.
    jsfiddle (why does not work?)
    Why this animated mode does not work? Can’t I simply render the chart again? the only way is instantiating another chart with the dataPoints already set?

    Thank you,


    • This reply was modified 1 year, 11 months ago by guilhermemaranhao. Reason: change the last question


    Chart animates only on the first render, as of now. When you use set method, chart re-renders based on the 3rd parameter. During the first render, as there are no dataPoints present, animation wouldn’t be visible. During second render (happened because of set method) animation wouldn’t happen. To update dataPoints dynamically and to animate chart, you can instantiate the chart, update dataPoints via chart-options and then call chart.render as shown in this updated JSFiddle.

    Vishwas R
    Team CanvasJS


    Thank you, @vishwas! That’s exactly what I was looking for, a way to have the animated rendering without having to re-instantiate the chart.

    Best regards,


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

You must be logged in to reply to this topic.