Attach a custom plugin to Vue-Chart - vue-chartjs

Question

We need to attach a custom plugin to vue-chart. Please guide us how to implement on the same
import { Line, mixins } from 'vue-chartjs'
export default {
namespaced: true,
extends: Line,
props: ['chartData', 'options'],
mounted() {
this.renderChart(this.chartData, this.chartData.options)
}
}
This is how we are using the line chart of Vue-chart. How to attach the plugin here
https://blog.larapulse.com/javascript/creating-chart-js-plugins
We want to try this. But since we are using vue-chart which internally uses chart.js. Need some help to attach the plugin. please guide us
I want to apply some background color to the chart for one specific column in the chart

Answer 1

vue-chart-js provide method to attach plugins. Use this way:
import the plugin
import ChartDataLabels from 'chartjs-plugin-datalabels';
then, call addPlugin in mounted
mounted() {
this.addPlugin(ChartDataLabels);
this.renderChart(
this.chartData,
this.options,
);
}
Below is PieChart.vue script in case you create pie chart :
<script>
import { Pie, mixins } from 'vue-chartjs';
import ChartDataLabels from 'chartjs-plugin-datalabels';
Chart.plugins.unregister(ChartDataLabels);
const { reactiveProp } = mixins;
export default {
extends: Pie,
mixins: [reactiveProp],
props: {
options: {
type: Object,
default: null,
},
},
mounted() {
this.addPlugin(ChartDataLabels);
this.renderChart(
this.chartData,
this.options,
);
},
};
</script>

Answer 2

Using the annotation plugin for Chart.js as example, you can use the addPlugin function to attach it:
import { Line, mixins } from 'vue-chartjs'
import chartjsPluginAnnotation from "chartjs-plugin-annotation"
export default {
namespaced: true,
extends: Line,
props: ['chartData', 'options'],
mounted() {
//Arguments is an Array of Plugins (https://vue-chartjs.org/api/#addplugin)
this.addPlugin([chartjsPluginAnnotation]),
this.renderChart(this.chartData, this.chartData.options)
}
}
After this just pass the plugin's options on your component as usual. In this case, if you wanted to draw a vertical line, it would be something like this:
computed: {
chart() {
return {
chartData: {
labels: this.data.labels,
datasets: [
{
label: "Score",
data: this.data.data
}
],
options: {
annotation: {
annotations: [
{
type: "line",
mode: "vertical",
scaleID: "x-axis-0",
borderColor: "#4ecca3",
value: parseInt(this.data.line),
borderDash: [4, 4],
label: {
content: this.data.line,
enabled: true,
position: "top",
xAdjust: 15,
backgroundColor: '#4ecca3',
fontSize: 10,
}
}
]
}
},
}
};
}

Answer 3

import chartjsPluginAnnotation from "chartjs-plugin-annotation";
And:
mounted() {
Chart.plugins.register(chartjsPluginAnnotation);
this.addPlugin(chartjsPluginAnnotation);
this.renderChart(this.chartData, this.options);
}