chartjs/chartjs-plugin-deferred

Add support for an inView callbaack

mloit opened this issue · 1 comments

mloit commented

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.

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