Have charts load on scroll with bootstrap 4 grids

[emjbr]

Hi,

I’m working on a website where I have multiple charts on a page that animate when they are scrolled to.

This was working fine (I used this JSFiddle example from a previous enquery on forums – https://jsfiddle.net/y5q7f8pa/) until I started implementing Bootstrap 4’s grid system into the page. Now, when the first chart on the page is scrolled to (which is embedded in a column), it triggers all the other charts (embedded in different columns) to animate at the same time.

I would really appreciate some advice on how to return to the charts on the page animating only when scrolled to, not when the first one is reached.

Thank you!

[emjbr]

To add:

A previous forum enquiry about charts in Bootstrap 4’s grid system was solved with this example http://jsfiddle.net/u9ehe16f/5/ however, as you can see, the charts both animate at the same time rather than individually on scroll.

[Manoj Mohan]

@emjbr,

The chart is animated only once when render() is called. Since you are using jQuery plugin of CanvasJS, it will call render() automatically once the chart is initialized. So, to animate the chart on scroll, you need to initialise chart on scrolling to the desired position as shown in this JSFiddle.

—-
Manoj Mohan
Team CanvasJS

[emjbr]

Thank you so much!!