Chartjs-Annotation problem with ng2-charts in Angular 11

by

0👍

✅

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

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

Leave a comment