afterDraw callback is called for each graph on the same page

[ifs-mohamedeljarrari]

Reproduction of the problem

1. Have two components with a graph in each component
2. The first one use the afterdraw callback in plugins
3. The second one doesn't have any plugins or callback in it

Environement

Angular version: 14.1.0 && 13.3.0 ng2chart: 3.1.0 && 4.0.0 chart.js: 3.8.0

Context

I have a page that contain multiple charts, some of them use the plugin's callback afterDraw some doesn't. But by doing this the afterDraw callback is fired even for the charts who doesn't have a plugins implemented.

Note

This bug seems to not be present on V3.0.9 of ng2charts, but is present in 3.1.0 and above. I think the plugins are not correctly isolated. When I implement two plugins on the two charts, they are drawn on top of the other.

Example

I have a doughnut with a text drawn in the middle and a line chart that, because of the afterdraw callback of the doughnut, have the same text printed in the middle of the graph.

Here is a sample of my issue: Stackblitz

Disclaimer: I applogize if this is not a bug and just a lack of skills of my part :-)

[ifs-mohamedeljarrari]

EDIT: The issue seems to be from the plugin parameter itself not only from the afterDraw callback. When I use a plugin in a graph whatever what i'm putting inside, this parameter is replicated to other graph

[dudewad]

There seems to be a fatal flaw in the design of this library: https://github.com/valor-software/ng2-charts/blob/09a5d1d2bb39d2beba9f40268ec0c6a8a00535f8/projects/ng2-charts/src/lib/base-chart.directive.ts#L92 This line globally registers all plugins that you pass to the component. Since the configuration is retrieved using this method and literally doesn't allow all configuration options to be passed. So unless this repo is forked and this issue fixed, we're stuck with global plugins.

[Ivanrodpar]

Same issue

[santam85]

This seems to be a valid bug for the library. @dudewad you are absolutely right, are you happy to take a stab at a PR?

[musoyanm]

same issue, using the beforeDraw method in a plugin, both charts are affected by it

edit: found a temporary workaround by explicitly disabling the plugin in the second chart options (total is the plugin id)

options: {
  plugins: {
    total: false
  } 
}

[q00u]

Same issue here, one doughnut chart has a custom plugin for displaying text in the center. This has resulted in ALL charts displaying text in the center.

Trying to add "doughnutInteriorText: false" to plugins in the options of another chart fails due to "Object literal may only specify known properties"

[musoyanm]

@q00u are you typing the options and if so, how?