[Chartjs]-“lazy-initialize” In ChartJS

by

1👍

✅

Explaining the concept with a H1 element.
Whenever the H1 will appear into the viewport, invoke a function to render the chart.

You can calculate the offset of the element(Graph’s Div) and then compare that with the scroll value like:

$(window).scroll(function() {
   var hT = $('#scroll-to').offset().top,
       hH = $('#scroll-to').outerHeight(),
       wH = $(window).height(),
       wS = $(this).scrollTop();
   if (wS > (hT+hH-wH) && (hT > wS) && (wS+wH > hT+hH)){
      $('h1').addClass('view')
   } else {
      $('h1').removeClass('view')
   }
});

Into the example, i have shown the demo for adding style to the H1. Instead you have to render your graph here.

Example: Demo Link

Leave a comment