VueChart.js with inline plugins example

[winou75]

Hi guys, it might not be the place to ask this kind of question, but as a newbie, I don't really understand how to use plugins ...

I'd like to add this plugin PieceLabel to my component below.

export default {
  name: 'pie-chart',
  mixins: [reactiveProp],
  extends: Pie,
  props: {
    options: Object,
    chartData: Object,
  },
  mounted() {
    const { options, chartData, renderChart } = this

    this.addPlugin({
    id: 'pieceLabel',
      beforeInit: function (chart) {
        console.log(chart)
      }
    })

    options: {
      pieceLabel: {
        mode: 'label',
        precision: 1
      },
   }
    renderChart(chartData, params)
  },
}

The issue is how does it recognize the id ??
Thanks a lot

[apertureless]

Well, I guess you have to install the plugin over npm
npm install chart.piecelabel.js

Then import or require it

import * as PriceLabel from 'chart.piecelabel.js' 
// If the import is not working you could try to require it
const PriceLabel = require('chart.pricelabel.js')

and then add it as a plugin

this.addPlugin(PriceLabel)

This would be the approch for a per chart basis. To register it globally for all charts (that are supported by that plugin)

You have to import the chart instance fist.

import Chart from 'chart.js'
Chart.plugins.register(PriceLabel)

[winou75]

you are a marvellous person.

[ebisbe]

I think this should be in the docs. And also how to pass configuration to the plugin

[apertureless]

@ebisbe not sure what you mean.
There is a section how to add inline plugins in the docs:

https://vue-chartjs.org/#/home?id=inline-plugins

And also the plugins prop if you want to pass it to your chart:

https://vue-chartjs.org/#/home?id=props

[ebisbe]

Edit:
I've found the issue. It's releated to the plugin it self.

@apertureless I'm trying to use annotation plugin but I'm not really being able to use it. So far I have a custom component that wraps LineChart with
import annotation from 'chartjs-plugin-annotation'
and

 mounted() {
    this.addPlugin(annotation)
    this.renderChart(this.applyColors(this.chartData), this.chartOptions)
  },

But I'm not sure where or how I have to pass the Annotations configuration.

[apertureless]

I guess you are using this one? https://github.com/chartjs/chartjs-plugin-annotation

Well, they say:

To configure the annotations plugin, you can simply add new config options to your chart config.

So have you tried this?

const options = {
	responsive: true,
	title: {
		display: true,
		text: 'Put your other options in here'
	}
	annotation: {
		events: ['click'],
		annotations: []
	}
}


this.renderChart(data, options)

[ebisbe]

Yes, I figured it out. There's an issue with using array labels [['lable','text'],['label2','text2']]. I've just switched to ['label', 'label2'].

thanks, anyway

[mreduar]

@ebisbe not sure what you mean. There is a section how to add inline plugins in the docs:

https://vue-chartjs.org/#/home?id=inline-plugins

And also the plugins prop if you want to pass it to your chart:

https://vue-chartjs.org/#/home?id=props

Greetings, this is no longer available and is already on V5, how to add inline plugins now? would like to do this:

plugins: [{
   beforeInit: function(chart) {
      chart.data.labels.forEach((e, i, a) => {
         if (/\n/.test(e)) {
            a[i] = e.split(/\n/);
         }
      });
   }
}]

[apertureless]

@mreduar
You can still pass plugins over the plugin prop to the chart. https://vue-chartjs.org/api/#props
Should work pretty much the same way.