Make plugin no longer self registering

[LeeLenaleee]

Working example: https://codepen.io/leelenaleee/pen/ExwBJgK

[simonbrunel]

Awesome! Strange that you didn't have to change the plugin integration in the docs. Not sure why it was already integrated that way.

Can you also add a migration page, similar to this one? (mostly a copy/paste and remove parts that doesn't apply to this plugin).

[simonbrunel]

Thanks a lot @LeeLenaleee!

[gregh3269]

Hello,
I have retested this and now for me it does not load deferred. I use the html version, and at the moment I am using

new Chart(..
plugins: {
            deferred: {
              xOffset: 150,   ## defer until 150px of the canvas width are inside the viewport
              yOffset: '50%', ## defer until 50% of the canvas height are inside the viewport
              delay: 500      ## delay of 500 ms after the canvas is considered inside the viewport
            }
          }
...

as in the read me. Do I have to change anything here?

The docs now mention this:

var chart = new Chart(ctx, {
  plugins: [ChartDeferred],
  options: {
    // ...
  }
})

[LeeLenaleee]

@gregh3269 do you have a reproducible sample because when I tested this it worked fine: https://codepen.io/leelenaleee/pen/ExwBJgK

[gregh3269]

Ok, I can see we now must have a

Chart.register(ChartDeferred);

first, which makes a global, guess we now cannot do it inline ?

from the getting started what does this mean/do then?

OR only to specific charts

var chart = new Chart(ctx, {
  plugins: [ChartDeferred],
  options: {
    // ...
  }
})

..I can see from here
https://www.chartjs.org/docs/latest/developers/plugins.html
we need the global.

Might be worth updating the README.md also for this change for the tldr's. ;-)

Thanks.

[LeeLenaleee]

@gregh3269 mb, seems I forgot to save the pen, updated it with inline register and it seems to work fine so if it is not working please share a sample of it: https://codepen.io/leelenaleee/pen/ExwBJgK

[gregh3269]

ok thanks, makes sense now!

new Chart(...
  plugins: [ChartDeferred],
  ...
  options: {
    ...
    plugins: {
      deferred: {
        xOffset: 150,   ## defer until 150px of the canvas width are inside the viewport
        yOffset: '50%', ## defer until 50% of the canvas height are inside the viewport
        delay: 500      ## delay of 500 ms after the canvas is considered inside the viewport
      }
    }
  }
});