I'm working in Vue 3 Composition and trying to draw a horizontal line across my ChartJS graph using the ChartJS annotation plugin. (https://www.chartjs.org/chartjs-plugin-annotation/latest/guide/types/line.html)
I'm using Primevue Chart component as the implementation of ChartJS.
I have imported import annotationPlugin from 'chartjs-plugin-annotation'; and import Chart from 'primevue/chart'; and made my component like:
<Chart
type="line"
:data="data"
:options="options"
:plugins="annotationPlugin"
/>
This is what my chart options look like:
const options = ref({
plugins: {
autocolors: false,
annotation: {
annotations: {
line1: {
type: 'line',
yMin: 125,
yMax: 125,
borderColor: 'rgb(255, 99, 132)',
borderWidth: 2,
},
},
},
},
});
My graph successfully renders, but there is no horizontal line and no errors.
I think I'm following the documentation correctly, but there must be something I'm missing. Thanks in advance!
We hit a similar problem and needed to make sure we globally register the annotation plugin in our project root.
Without this, the annotation silently fails just as you are describing:
import { Chart } from 'chart.js';
import annotationPlugin from 'chartjs-plugin-annotation';
Chart.register(annotationPlugin);
Also, just referencing the annotation in your options object is enough. No need for the plugins argument to the Chart component itself here:
<Chart
type="line"
:data="data"
:options="options"
:plugins="annotationPlugin"
/>