1. Home
  2. Forum
  3. Flutter
  4. Line chart animation : Show legend on line itself

Line chart animation : Show legend on line itself

My use case is :

I have 2 line series in SfCartesianChart. where year is on x-axis and population is on Y axis. each series indicates a country. I added  animation duration (20 sec) in chart so that it will give more visual effect of population change over the last 10 years.  

I want to show country name (legend) on last datapoint of series , so that it will be more readable when animation is in progress. A sort of : Running snake (lines) having its name on its head (last datapint)


10 Replies
YG Yuvaraj Gajaraj Syncfusion Team January 25, 2022 01:23 PM UTC

Hi Dhananjay, 
 
Greetings from Syncfusion. We have analyzed your query and your requirement can be achieved using the annotation feature. We have created a sample for rendering a text at last point, since the text moves out of chart area, we have set a visible range for x-axis to overcome this. We have attached the sample below for your reference, we hope it will help you to achieve your scenario. 
 
  
 
Regards, 
Yuvaraj.  


DG Dhananjay Ghongane January 26, 2022 09:15 AM UTC

Thank you so much for your quick reply.

Yes we are almost there. But here is twist we are using syncfusion animation to render a line slowly on chart by using animation duration (20 second) , and during this animation duration we want to highlight last datapoint (mark).

And in animation last datapoint is changing over the period of 20 second (animation functionality does it). 


Hope you revert back soon. 



DG Dhananjay Ghongane replied to Yuvaraj Gajaraj January 26, 2022 03:29 PM UTC

Thank you so much for your quick reply.

Yes we are almost there. But here is twist we are using syncfusion animation to render a line slowly on chart by using animation duration (20 second) , and during this animation duration we want to highlight last datapoint (mark).

And in animation last datapoint is changing over the period of 20 second (animation functionality does it). 


Hope you revert back soon. 



YG Yuvaraj Gajaraj Syncfusion Team January 27, 2022 02:39 PM UTC

Hi Dhananjay, 
 
Thanks for the information, unfortunately yet we are not clear on your exact requirement. Do you wish to render a text along with the series animation that is needs to animate the text with the line series itself or highlight the text means what you wish to do. If possible, kindly share any video reference to us that will be more helpful to us to provide a solution sooner. 
 
Regards, 
Yuvaraj. 


DG Dhananjay Ghongane replied to Yuvaraj Gajaraj January 28, 2022 07:45 PM UTC

Hi Yuvaraj,

Sorry for confusion "I want line race by using syncfusion animation functionality"  So that i can create nice video out of it with simply specifying animation duration.

Example : Line Race with legend at the end 

Example 2: Line chart Race example 2


We are using animation functionality to create small videos out of chart, We are able to create line race using animation, but unable to annotate last datapoint. as shown in above example charts. 



Regards,
Dhananjay.


YG Yuvaraj Gajaraj Syncfusion Team January 31, 2022 04:00 PM UTC

Hi Dhananjay,  
  
We have analyzed your query, as of now we don’t have a support for display the legend along with the line series animation because the properties belong to the line series always get render after the series animation get complete.  
  
If you have any further query, please get back to us.  
  
Regards,  
Yuvaraj.

DG Dhananjay Ghongane replied to Yuvaraj Gajaraj February 1, 2022 04:59 AM UTC

Ok, thanks. 
I will implement custom animation by using timer + updateDatasource + annotation + setState() method as suggested by you in very first reply. 

But going forward it will be great if we get this functionality in within syncfusion animation or provide different chart type "line race".

Can you convert this as new future request in flutter syncfusion ?


YG Yuvaraj Gajaraj Syncfusion Team February 2, 2022 03:57 PM UTC

Hi Dhananjay, 
 
We have considered your requirement as new feature request and logged the feedback. We can't provide a definite timeline on this, and this will be implemented in any of our upcoming releases yet to come. You can track the status of the feature using below feedback link. 
 
 
Regards, 
Yuvaraj. 


DG Dhananjay Ghongane replied to Yuvaraj Gajaraj February 24, 2022 09:06 PM UTC

I implemented custom animation by using timer + updateDatasource + annotation + setState() 

Here i am facing problem if annotation text is big its getting disappear.   i tried various approaches like passing  annotation text in "Wrap" or "Flexible" widget but its not working.  

Do you know how to fit annotation having big text in chart ?


YG Yuvaraj Gajaraj Syncfusion Team February 25, 2022 10:25 PM UTC

Hi Dhananjay, 
 
The annotation will get hidden when it goes out of the chart area, that is the default behavior we have maintained. You can wrap your custom widget inside the Container widget and set the width for it, so that, if the text width exceeds the container width it will get wrapped to next line, but if the annotation goes out of chart area, it will get hidden. In this case, we suggest to set the font size to be smaller in comparing with what you have now. This may help to achieve your requirement. 
 
Regards, 
Yuvaraj. 


Loader.
Up arrow icon