[Chartjs]-React + ChartJS V3: Annoations don't work

You dont import and register the annotation plugin:

import { Chart } from 'chart.js';
import annotationPlugin from 'chartjs-plugin-annotation';

Chart.register(annotationPlugin);

Based on LeeLenalee’s answer here’s a fully working example.

Changes to code in question:

• import and register annotationPlugin
• set annotation type to type: 'line' as const (not just type: 'line'). Otherwise typescript complains.

import React from 'react';
import { Bar } from 'react-chartjs-2';
import { Chart } from 'chart.js';
import annotationPlugin from 'chartjs-plugin-annotation';

Chart.register(annotationPlugin);


export const MyChart: React.FC = () => {
  const options2 = {
    plugins: {
      legend: {
        display: false,
      },
      annotation: {
        annotations: [
          {
            id: 'a-line-1',
            type: 'line' as const, // important, otherwise typescript complains
            mode: 'horizontal',
            scaleID: 'y',
            value: 1.0,
            borderColor: 'red',
            borderWidth: 4,
            label: {
              enabled: false,
              content: 'Test label',
            },
          },
        ],
      },
    },
  };

   const data2 = {
    labels:   [ 'a', 'b'],
    datasets: [ { data: [1, 2] } ],
   };

   return (<Bar options={options2} data={data2} height={150} />
   );
};