Annotation problem with ng2-charts in Angular 11

Question

i need to show a fixed line in my chart (like "Test Label" in the image):

So I added chartjs-plugin-annotation in to my Angular 11 project so I have those versions:

"chart.js": "^2.9.3",
"chartjs-plugin-annotation": "^1.0.2",
"ng2-charts": "^2.3.0",

Then I added to my options:

    this.chartOptions = {
      responsive: true,
      scales: {
        xAxes: [{}],
        yAxes: [
          {
            id: 'y-axis-0',
            position: 'left',
          }
        ]
      },
      annotation: {
        annotations: [{
          type: 'line',
          drawTime: 'afterDatasetsDraw',
          id: 'strip-line-1',
          mode: 'horizontal',
          scaleID: 'y-axis-0',
          value: tagvalue,
          borderColor: 'red', // '#feaf00',
          borderWidth: 3
        }]
      }
    };
  }

But no lines are showed... so I found that I have to register this, but it's not working

import * as ChartAnnotation from 'chartjs-plugin-annotation';

Chart.pluginService.register(ChartAnnotation);

I got:

TS2559: Type 'typeof import("C:/.../node_modules/chartjs-plugin-annotation/types/index")' has no properties in common with type 'Plugin'.

This is because:

Is it a chartjs-plugin-annotation bug? I need to change some dependecies?

Answer 1

As stated in the documentation of the annotation plugin you need to use version 0.5.7 if you are using chart.js version 2

Important Note For Chart.js 2.4.0 to 2.9.x support, use version 0.5.7 of this plugin Documentation for v0.5.7 can be found on GitHub.

So you will need to remove the annotation plugin and the install the lower version or update to chart.js version 3

npm uninstall chartjs-plugin-annotation

npm install chartjs-plugin-annotation@0.5.7

Answer 2

Solved with:

npm install chartjs-plugin-annotation@0.5.7 as @LeeLenalee suggestes, after that:

import * as ChartAnnotation from 'chartjs-plugin-annotation';
import Chart from 'chart.js';




  ngOnInit(): void {
    Chart.pluginService.register(ChartAnnotation);
  }
    
  // ...
  this.myChartOptions = {
    responsive: true,
    scales: {
      xAxes: [{}],
      yAxes: [
        {
          id: 'y-axis-0',
          position: 'left'
        }
      ]
    },
    annotation: {
      annotations: [
        {
          drawTime: 'afterDatasetsDraw',
          id: 'hline',
          type: 'line',
          mode: 'horizontal',
          scaleID: 'y-axis-0',
          value: 50, // My value
          borderColor: 'red',
          borderWidth: 3,
          label: {
             backgroundColor: 'red',
             enabled: true
          }
        }
      ]
    }
  };

If no lines are show, you can update the chart:

  import { BaseChartDirective } from 'ng2-charts';
  // ...

  @ViewChild(BaseChartDirective) chart: BaseChartDirective;

  // ...
  this.chart.update();