Animating charts with certain reference and not from beginning

Question

Hi Team,

I am in between rendering charts where I want to Animate the chart on Change of DataSource of the Series.

Currently, chartComponent.refresh() animates the chart (Scatter plot/ Bar chart) from origin ( 0 Zero)

What I want is to just animate the Delta.

E.g.

For first DataSource one of Y value is 10 and updated DataSource has Y - 20,

Here refresh() animates the 20 form 0-20. But I want to control this movement from 10-20.

Similar, pattern follows for negative direction too.

Let me know if any example you do have for such support.

Thanks

Durga Gopalakrishnan · Accepted Answer

Hi Prafulla,

Greetings from Syncfusion.

We suggest you use chart animate method to achieve your reported scenario. We have attached the sample and screenshot for your reference. By clicking the change data button, chart data will be updated.





 change(args){ 
       this.chart.series[0].dataSource = [
               { x: 'USA', y: 40 }, 
               { x: 'GBR', y: 20 }, 
               { x: 'CHN', y: 30 }
       ];
       this.chart.animate();  }

Screenshots 

Before Data Change



After Data Change



Sample : https://stackblitz.com/edit/react-ktqn8g

Please revert us if you have any concerns.
Regards,
Durga G