animate a waterfall chart

[Caleb Kliewer]

Is it possible to animate a waterfall chart when new data is passed to it?

[Baby Palanidurai]

Hi Caleb, 

  

Thanks for using syncfusion products, 

  

We have analyzed your query and your requirement can be achieved by using animate method. As per your requirement we have prepared a waterfall chart sample with button click. In that button click we have added the new points for waterfall series and then call the animate method in chart options to animate the series with new points.  

 

For more information on animate method, kindly find the help document. 

Please find the below code snippet to achieve this requirement, 

<div id="container"></div>     

   <button id='add' onclick="addData()"> 

     Click to add new point 

   </button> 

function addData() { 

      var chart = $('#container').ejChart('instance'); 

      chart.model.series[0].points.push({ x: "Net profit", showTotalSum: true, border: {color: "#2B557F"}, fill: "#4E81BC"}); 

      chart.animate(); 

   } 

Screenshot:  

Before add the new data: 

 

After add the new data: 

 

Sample for your reference can be find from below link, 

https://jsplayground.syncfusion.com/g4rccaoe 

  

 

Kindly revert us, if you have any queries. 

  

Thanks, 

Baby.