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

This topic contains 6 replies, has 3 voices, and was last updated by  Manoj Mohan 3 weeks, 4 days ago.

Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
  • #25296

    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



    Please take a look a this JSFiddle.

    Manoj Mohan
    Team CanvasJS


    Thanks @manoj


    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.



    Please take a look at this updated JSFiddle.

    Manoj Mohan
    Team CanvasJS


    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”
    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?



    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

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

You must be logged in to reply to this topic.