Adding a chart-js plugin to vue-chart-js - vue.js

Question

I'm trying to add a chartjs plugin called chartjs-plugin-annotation (https://github.com/chartjs/chartjs-plugin-annotation) to my vue-chart js project. In my BarChart.vue file, I first imported the chartjs annotation plugin
<script>
import { Bar, mixins } from "vue-chartjs";
import chartjsPluginAnnotation from "chartjs-plugin-annotation";
const { reactiveProp } = mixins;
export default {
extends: Bar,
mixins: [reactiveProp],
plugins: {
annotation: {
drawTime: "afterDatasetsDraw",
events: ["click"],
dblClickSpeed: 350,
annotations: [
{
drawTime: "afterDraw",
id: "a-line-1",
type: "line",
mode: "horizontal",
scaleID: "y-axis-0",
value: "25",
borderColor: "red",
borderWidth: 2,
onClick: function (e) {
// `this` is bound to the annotation element
},
},
],
},
},
props: {
options: {
type: Object,
required: true,
},
},
mounted() {
// add plugin
this.addPlugin([chartjsPluginAnnotation]);
this.renderChart(this.chartData, this.options);
},
watch: {
options() {
this.renderChart(this.chartData, this.options);
},
},
};
</script>
I added the plugin under mounted() this.addPlugin([chartjsPluginAnnotation]);, before rendering the chart.
Am I adding the config options to my chart correctly as at the plugins : ?
I've installed the plugin successfully, using npm install chartjs-plugin-annotation --save. I refreshed my app on my local but there's no annotation plugin added to the chart. What am I supposed to fill up in the onClick: function (e)? What am I still missing?
I apologise in advance because I'm really new to this framework.

Answer 1

Here's how your options object should look like:
{
...
annotation: {
annotations: [
{<your annotation object code here>}
],
},
...
}
Next, you've correctly identified that you should use the addPluing() method, just make sure to use it like so
// in imports
import SomePlugin from "..."
// in mounted
this.addPlugin(SomePlugin);

Answer 2

https://stackoverflow.com/a/65486537/7165219
import chartjsPluginAnnotation from "chartjs-plugin-annotation";
And:
mounted() {
Chart.plugins.register(chartjsPluginAnnotation);
this.addPlugin(chartjsPluginAnnotation);
this.renderChart(this.chartData, this.options);
}