Plugins not working in v4

[mgrsskls]

Expected Behavior

Plugins should be executed when passing to a chart component via :plugins="plugins".

Actual Behavior

Plugins are not executed.

I think this is because plugins is not added to the chart configuration here:

vue-chartjs/src/BaseCharts.ts

Lines 125 to 132 in 5c9a69c

	_chart.value = new ChartJS<TType, TData, TLabel>(
	canvasEl2DContext,
	{
	type: chartType,
	data: isProxy(data) ? new Proxy(chartData, {}) : chartData,
	options: getChartOptions<TType>(options, props.plugins)
	}
	)

As you can see on https://www.chartjs.org/docs/latest/developers/plugins.html, plugins should be an array in the configuration object (second param).

Or am I missing something?

Thanks a lot!

Environment

• vue.js version: 2.6.14
• vue-chart.js version: 4.0.1
• chart.js version: 3.7.1
• npm version: - (yarn @ 1.22.18)

[apertureless]

@mgrsskls

getChartOptions should handle that.

vue-chartjs/src/utils.ts

Lines 80 to 99 in 5c9a69c

	export function getChartOptions<TType extends ChartType = ChartType>(
	options?: TChartOptions<TType>,
	plugins?: PluginOptionsByType<TType>
	): TChartOptions<TType> | undefined {
	const chartOptions = options
	if (
	chartOptions !== undefined &&
	'plugins' in chartOptions &&
	typeof plugins !== 'undefined' &&
	Object.keys(plugins).length > 0
	) {
	chartOptions.plugins = {
	...chartOptions.plugins,
	...plugins
	}
	}
	return chartOptions
	}

Which plugins are you trying to use?
Are you sure that these plugins work with chart.js 3+ ?

[thabarbados]

@mgrsskls Just like in Chart.js plugins is an object

https://github.com/chartjs/Chart.js/blob/c057c96693819b41e7b89860f916c0aa361bafa5/types/index.esm.d.ts#L2811-L2818

Sorry, docs update coming soon

[mgrsskls]

Hi together, thanks for the quick response!

I am using a custom plugin, completely reduced it just for the case of debugging this.

I'm a little bit confused right now, but I'm also not a chart.js expert, so maybe I'm also completely on the wrong track… but here is a minimal repo: https://github.com/mgrsskls/vue-chartjs From my understanding you should get an alert, but that's not the case. I tried both cases: passing a plugins object directly to the vue-chartjs component and passing plugins in the chart options.

When I look at https://www.chartjs.org/docs/latest/developers/plugins.html, the plugins should be passed as an array via the chart options. The getChartOptions method returns an object though.

[thabarbados]

@mgrsskls thanks for your repo. Yes, it's my mistake. Sorry.
Plugins should be an array of this type https://github.com/chartjs/Chart.js/blob/c057c96693819b41e7b89860f916c0aa361bafa5/types/index.esm.d.ts#L805.
I will fix this soon.

[thabarbados]

@mgrsskls fixed in 4.0.3
You can check new types here

[jrahim54]

@thabarbados how does the new version support plugins like https://www.chartjs.org/chartjs-plugin-annotation/latest/ ? When I tried to register it to Chartjs I get a maximum call stack exceeded error.

[thabarbados]

@jrahim54 I need some time to understand why this is happening. After that, I will release a bug fix or make a new feature with support for such plugins.

[mgrsskls]

@mgrsskls thanks for your repo. Yes, it's my mistake. Sorry.

No need to be sorry! :) Thanks for the quick fix, works for me!

[thabarbados]

Hey @jrahim54 . After version 4.0.4 vue-chartjs works with chartjs-plugin-annotation without errors. You can check here

[batchor]

I'm still having the type error with "chartjs-plugin-annotation": "^3.0.1", "chart.js": "^4.4.3", and "vue-chartjs": "^5.3.1".

const options  = {
  plugins: {
    annotation: {
      annotations: {
        line1: {
          type: 'line',
          yMin: 60,
          yMax: 60,
          borderColor: 'rgb(255, 99, 132)',
          borderWidth: 2,
        }
      }
    }
  }
};


<template>
  <Bar id="bar" :options="options" :data="data" />
</template>