Home forums Using CanvasJS Have charts load on scroll with bootstrap 4 grids

Tagged: 

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #28500

    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!

    #28501

    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.

    #28552

    @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

    #28557

    Thank you so much!!

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.