Chartjs-Chart.js doubles in size each time user scrolls to it

by

1👍

✅

Besides the doubling in size, which I can’t reproduce, you’re resetting the inView variable each time the graph is scrolled out of view. When it’s back in view again, you’re creating a new graph. This happens every time.

The solution is to not set inView back to false once the graph has been rendered once:

var graphRendered = false;
...
$(window).scroll(function() {
  if (! graphRendered && isScrolledIntoView('#canvas')) {
    graphRendered = true;
    new Chart(document.getElementById("canvas").getContext("2d")).Pie(data);
  }
});

(renamed inView to graphRendered to better suit what it’s being used for)

fiddle

Leave a comment