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

Solved with:

npm install [email protected] 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();