Can't Draw Horizontal Line on Graph Using ChartJS Annotation Plugin and Primevue Chart

Question

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!

Graph without horizontal line

Answer 1

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"
/>

Source: https://www.chartjs.org/chartjs-plugin-annotation/latest/guide/integration.html#bundlers-webpack-rollup-etc