Make plugin no longer self registering

[LeeLenaleee]

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

[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
      }
    }
  }
});