React-chartjs-2: Allow a single Chart instance to get a plugin attached instead of globally

[gmp26]

Chart.js documents a way to attach plugins to single chart instances at http://www.chartjs.org/docs/latest/developers/plugins.html, but in react-chartjs-2 I can only find a way to register a plugin globally across all charts.

We'd need to provide a willMount lifecycle function somehow.

[jerairrest]

Interesting idea.... I like it!.

[acomito]

@jerairrest Thanks for making a react version. I was able to add charts to an app in a few hours because of this package-- great stuff.

Is there a simple way to do a 100% stacked bar chart?

I saw this issue

https://github.com/chartjs/Chart.js/issues/2709

which suggested this plugin:

https://github.com/y-takey/chartjs-plugin-stacked100

I'm not sure if I can set the plugin globally (and only need it on one of many chart instances)

[jerairrest]

I haven't had a chance to look into this. :( Maybe you could extend the standard bar chart and redraw it to be a stacked chart? https://github.com/jerairrest/react-chartjs-2/issues/149 Currently if you apply a plugin is it on a global scope. I'm hoping to get look into this feature soon.

[ericmcgregor]

I didn't realize you couldn't attach a plugin to a single chart instance. I'm trying to save a chart as a png, which i can do using the global plugin service and afterDraw... however, because of the way this global plugin service is designed, keeps adding new instances of the function, which i don't understand. I feel like i must be missing something, because being able to attach to those hooks on a per-chart basis seems like it wouldn't be missing. Does anybody have any insight into this? Or should i just try and use the raw chartjs library without this wrapper?

[ivesdebruycker]

I believe this is (now?) possible by using the plugins property:

<HorizontalBar
  data={this.state.data}
  options={{
    legend: false
  }}
  plugins={[myChartJSPlugin]}
>
</HorizontalBar>

with plugin defined elsewhere, e.g.:

const myChartJSPlugin = {
  beforeDatasetsDraw: chartInstance => {
  }
}

[paulcredmond]

@ivesdebruycker This works, but any idea why it's being called so many times? I have a component that renders 12 charts, and with this function in place on each one a console.log() reveals the function is called 12 X 40 times (480 in total). Very odd.

[paulcredmond]

@ivesdebruycker I figured it out... each chart has 4 datasets, so it's running before each one. It's also doing the same for beforeDraw though. Be nice if there was a function that could run once for each chart instance.

[negebauer]

Shouldn't this be documented somewhere? I was looking into how to do this and there was nothing in the docs, but I did find this issue!

And it is working, plugins get passed correctly.

So this issue should be closed, right?