Home › forums › Using CanvasJS › How to Re render with animation
Tagged: animation, dynamicDatapoints, stackedColumn
This topic contains 6 replies, has 5 voices, and was last updated by guilhermemaranhao 1 month, 3 weeks ago.
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.
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?
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?
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?
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.
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.
You must be logged in to reply to this topic.