Start animation on reaching viewport or scrolling down the page

[sanat]

Hi, I want to know if there is a way to start animation when user reach the canvas location on the webpage. I using vuejs, please keep in mind about it when you guys help.

Thanks in advance

[Manoj Mohan]

@sanat,

Please take a look a this JSFiddle.

—-
Manoj Mohan
Team CanvasJS

[sanat]

Thanks @manoj-mohan

[oncenter]

How would I do this with multiple charts on a single page?

I have something like “var chartPlanning = new CanvasJS.Chart(“chartContainerPlanning”, {”

so in the fiddle example I can get one chart to work as intended, as soon as I repeat this for another chart, it breaks.

Everything is names properly etc.

[Manoj Mohan]

@oncenter,

Please take a look at this updated JSFiddle.

—-
Manoj Mohan
Team CanvasJS

[oncenter]

Thank, however, I cannot get it to work. The jsfiddle example duplicates one chart 3 times. I have 5 charts on one page, each chart has a specific name:

var chartPlanning = new CanvasJS.Chart(“chartContainerPlanning”, {
animationEnabled: true,
theme: “light2”, // “light1”, “light2”, “dark1”, “dark2”
title:{
text: “”
},
subtitles: [{
text: “Title Here”,
}],
backgroundColor: “transparent”,
axisY: {
title: “Planning”
},
data: [{
type: “column”,
showInLegend: false,
color: “#127aaa”,
legendMarkerColor: “grey”,

dataPoints: [
{ y: 128567, label: “Oct 2017” },
{ y: 532098, label: “Nov 2017” },
{ y: 234732, label: “Dec 2017” },
{ y: 742815, label: “Jan 2018” },
{ y: 356871, label: “Feb 2018” },
{ y: 457832, label: “Mar 2018” },
{ y: 462434, label: “Apr 2018” },
{ y: 780000, label: “May 2018” }
]
}]
});

The other charts are very similar. each with its own name

var chartComplete = new CanvasJS.Chart(“chartContainerComplete”, {
var chartWorking = new CanvasJS.Chart(“chartContainerWorking”, {
var chartLost = new CanvasJS.Chart(“chartContainerLost”, {
var chartWaiting = new CanvasJS.Chart(“chartContainerWaiting”, {

If I paste your example into my page it works, but as soon as I work your solution with mine, it doesn’t work. I get “Reference Error: options is not defined” in console.

Any ideas?

[Manoj Mohan]

@oncenter,

Rendering chart for the first time only after scrolling to the position of chart should work fine in your case. Creating an array of having all the charts (chartComplete, chartWorking, chartLost, chartWaiting) and adding scrollFunction method should work fine.

If you are still facing the issue, kindly create JSFiddle reproducing the issue and share it with us so that we can look into the code, understand the scenario better and help you out.

—
Manoj Mohan
Team CanvasJS

[Anup]

When I am putting your code it works fine but I want to use 5 different chart and every chart will animate when scroll to that chart. any solution?

[Anup]

When I am putting your code it works fine but I want to use 5 different chart and every chart will animate when scroll to that chart. any solution?

[Shashi Ranjan]

@anup,

The JSFiddle shared by @manoj-mohan seems to be working fine.

Can you kindly create a JSFiddle reproducing the issue you are facing so that we can look into the code, understand the scenario better and help you out?

—
Shashi Ranjan
Team CanvasJS

[Frosty Wolf]

Hello, just saw this post and I also can’t seem to make this work, I made a JSFiddle to show my code: https://jsfiddle.net/ea7wd4vm/
Im trying to have multiple diferent charts, where some load at the same scroll lenght as the other and some don’t.
I have tried some other stuff but it hasn’t worked, sorry for my javascript skills, I just started learning it.
Thank you!

[Shashi Ranjan]

@frosty-wolf,

The JSFiddle that you have shared above seems to be not working. Please take a look at this updated JSFiddle which is created based on the code that you have shared and rendering chart upon scroll seems to be working fine.

—
Shashi Ranjan
Team CanvasJS