Home forums Using CanvasJS Start animation on reaching viewport or scrolling down the page Reply To: Start animation on reaching viewport or scrolling down the page

#25998

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?