chartjs / chartjs-plugin-deferred

Chart.js plugin to defer initial chart updates
https://chartjs-plugin-deferred.netlify.app/
MIT License
110 stars 21 forks source link

Add support for an inView callbaack #20

Open mloit opened 3 years ago

mloit commented 3 years ago

I have a need to be able to set a state var once the chart is in view and the animation has started. Unfortunately I cannot rely solely on the events from the chart, I am using onComplete, but in adding this plugin, onComplete is immediately fired on startup, even if the chart isn't in view, which causes problems for me. I have yet to determine why onComplete is firing. Long story short, it would be helpful to have a callback/event like inView that fires once the chart scrolls into view. This would allow me to ignore the onComplete events until after this callback event happens.

LeeLenaleee commented 2 years ago

As soon as the new version releases for chart.js V3 you can use the initial property on the context you get to see if the chart is in view.

The initial prop only gets set to true when the chart scolls in to vieuw:

options: {
  animation: {
    onComplete: (ctx) => {
      if (!ctx.initial) {
        return;
      }

      console.log('Chart in view')
    }
  }
}

https://codepen.io/leelenaleee/pen/vYWyRYw