We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

animate on scroll

is there any example that showcase chart animation on scrolling ?

i want to make a page with several donuts charts , some of them are not visible until i scroll the page .
so i want to run the initial donut animation only when the user scroll to .

is that possible please?

thanks and good day .

1 Reply

SK Saravana Kumar Kanagavel Syncfusion Team April 6, 2016 02:46 PM UTC

Hi Issam,
Thanks for using syncfusion products. We have analyzed your query and prepared sample based on your requirement. In the sample we are having two charts and for the second chart we have set ”initSeriesRender” property as false. So initially series for the second chart is not rendered. Please find the below code snippet.


        initSeriesRender: false

We have subscribed the onscroll event for the window and written the below code.


function testScroll(evt) { //Trigger the scroll event

        if (window.pageYOffset > 300) {

            var chartCalObj = $("#container1").data("ejChart");



window.onscroll = testScroll

In the above code, if the pageOffset is more than 300, then we have called chart’s seriesRender() method. So while scrolling the page, series for the second chart is created. In the below link we have attached sample for your reference.

Sample link: http://www.syncfusion.com/downloads/support/forum/123638/ze/Sample1158000935
Please let us know if you have any concern.

Saravana Kumar K

Live Chat Icon For mobile
Up arrow icon