chartjs-plugin-deferred icon indicating copy to clipboard operation
chartjs-plugin-deferred copied to clipboard

Add support for an inView callbaack

Open mloit opened this issue 4 years ago • 1 comments

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.

mloit avatar Jul 29 '21 08:07 mloit

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

LeeLenaleee avatar Feb 06 '22 15:02 LeeLenaleee