Animation not working in LineSeries

Question

Hi Syncfusion Team,I am using your LineSeries but the animation not working. I have attached my code below, please help me check it.Thank you,CuongAttachment: line_chart.dart_4f61ea37.zip

Sriram Kiran Senthilkumar · Accepted Answer

Hi Ta Quoc Cuong,We have checked your query at our end, and we would like to
let you know that the animation which you are referring to is called the
initial rendering animation and it will only be performed at the initial
rendering of the chart. This is the current default behavior.In your case, as you are updating the chart series data
dynamically, the initial rendering animation will not happen as the chart
widget is already rendering initially with an empty array or null data points.So, we kindly request you to use the animate public method of the ChartSerieController to perform the initial rendering
animation on demand.Note: If this post is helpful, please consider Accepting it
as the solution so that other members can locate it more quickly.Regards,Sriram Kiran

Sriram Kiran Senthilkumar · Answer

Hi Ta Quoc Cuong,We have checked your query with the provided sample at our end and we found that you have set the animationDuration property to ‘0’ value in your sample and due to this, the series animation is not working at your end. So, we kindly request you to set the value greater than zero for the animationDuration property to enable the animation for the series. Widget build(BuildContext context) { return SfCartesianChart( series: >[ LineSeries( animationDuration: 1500, ), ], ); } Please check and get back to us if you require further assistance.Regards, Sriram Kiran

Ta Quoc Cuong · Answer

Dear Sriram Kiran,First, thank you for your replying.I'm sorry about the code sample, I made it from my code and I forgot to change the duration time from 0 to 1000, but it is not the reason for my problem. Here is a sample video:https://drive.google.com/file/d/1HDFmUU8HXpjUB7pTTm7GUHQVBFAg6JyJ/view?usp=sharing The first one was drawn with a specific data set and without the min and max values of the y-axis. This gives me the animation I wanted.The second one was drawn with an empty array at the beginning and updated with new data. The animation was not as I expected. The line has appeared immediately and then the dots appear without animation, meanwhile, I want the line would be drawn with animation from left to right and then the dots appear later like the first one.The last one was drawn with data full of the month with values null. After that, I update the new data with values that are not null (using bloc), but the amount of items is not the same as the previous data. The animation is not working. This is my current version but I want it to have animation like the first one.I have a solution using ChartController.anime() and calling in didUpdateWidget with the async function, but I don't think that is a good way.Regards,Cuong

Ta Quoc Cuong · Answer

Dear Sriram Kiran,Thank you for your answer, I will try to use the animate function.Thanks,Cuong

Sriram Kiran Senthilkumar · Answer

Hi Ta Quoc Cuong,Most welcome. Kindly get in touch with us if you have further
queries. We are always happy to assist you.Regards,
Sriram Kiran

Nick Foster · Answer

same here. thanks for sharing!

Hariharasudhan Kanagaraj · Answer

You're
welcome, Nick.