Import plugin

Is it possible to integrate a plugin into react-chartjs? For example https://github.com/xch89820/Chart.Funnel.js

I tried using

Chart.pluginService.register({
		// something
	});

with no success.

[dbrodie122]

@brianbolnick I had the same question about the Data Labels plugin and got it to work, though maybe not precisely how it was intended.

npm install chartjs-plugin-datalabels

The documentation had no references (that I saw) as to the proper way to import and use it via npm, so I just tried import 'chartjs-plugin-datalabels' in the container component that held my charts.

Voila! Data labels on my charts.

After that, you can pass the plugins property to your options object for your chart, and set things how you like according to the docs

const options = {
  responsive: true,
  plugins: {
    datalabels: {
      color: 'black'
    }
  }
}

Class PieChart extends React.Component {
  ...
  render(){
    return(
      <div>
          <Pie data={data} options={options}/>
      </div>
      )
   }
}

This is the simplest solution I’ve found so far.

[cwkeam]

That method is not working for me with: ‘chartjs-plugin-annotation’

import ‘chartjs-plugin-annotation’; …

<Line … options={{ maintainAspectRatio: false, lineTension: 0, … plugins:{ annotation: { events: [“click”], annotations: [ { drawTime: “afterDatasetsDraw”, id: “hline”, type: “line”, mode: “horizontal”, scaleID: “y-axis-0”, value: 30, borderColor: “black”, borderWidth: 5, label: { backgroundColor: “red”, content: “Test Label”, enabled: true }, onClick: function(e) { // The annotation is is bound to the this variable console.log(“Annotation”, e.type, this); } }] } }}/>

I simply can not see the horizontal line.

I copied the code for annotations from: https://codepen.io/anon/pen/aKjevd which does basically what I need mine to do.