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?

score 1 · Answer 1 · answered Oct 05 '21 at 18:38

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

answered Oct 05 '21 at 18:38

LeeLenalee

27,463
6
45
69

Hi, thanks for the reply, I put v0.5.7 but the documentation is very unclear and the example is not working... I'm using the chart with ng2chart, not directly with ChartJs... if I change the annotation and then remove Chart.pluginService.register(ChartAnnotation); as you said I got an error from TypeScript option type so I put as ChartAnnotation but still i can't see the line in my bar chart... do you have any wroking example with ng2chart with bar and this fixed line? – Nammen8 Oct 06 '21 at 08:08
I can change the additional library, I just need to show that line in my ng2chart in some way – Nammen8 Oct 06 '21 at 08:36

Nammen8 · Accepted Answer · 2021-10-12T09:35:56.057

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

Annotation problem with ng2-charts in Angular 11

2 Answers2