angularchart.jsng2-chartsangular-chartchartjs-plugin-annotation

Annotation problem with ng2-charts in Angular 11


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

enter image description here

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: enter image description here

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


Solution

  • 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();