Angular 9 - chartjs-plugin-annotation error

Question

I'm trying to draw a vertical line on my ng2-charts chart. In order to achieve this, I've installed the chartjs-plugin-annotation package. Unfortunately, it is not working and I cannot figure out what's wrong.

My configuration is basically the same as the demo here.

import { Input } from '@angular/core';
import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { ChartDataSets, ChartOptions, ChartPoint } from 'chart.js';
import * as annotations from 'chartjs-plugin-annotation';
import { Color, Label } from 'ng2-charts';
import { STO } from 'src/app/models/STO';


    @Component({
      selector: 'app-sto-chart',
      templateUrl: './sto-chart.component.html',
      styleUrls: ['./sto-chart.component.css']
    })
    export class StoChartComponent implements OnInit {
    
      @Input() sto: STO;
      STOs: STO[];
      stoChartData = new Array<ChartDataSets>();
      stoChartLabels = new Array<Label>();
      // ***** HERE IS THE ISSUE **************************************
      stoChartOptions: (ChartOptions & { annotation?: any }) = {
        responsive: true,
        annotation: {
          annotations: [
            {
              type: 'line',
              mode: 'vertical',
              scaleID: 'x-axis-0',
              value: '2020-10-05',
              borderColor: 'red',
              borderWidth: 2,
              label: {
                content: 'TODAY',
                enabled: true,
                position: 'top'
              }
            }
          ]
        }
      }; 
    
      stoChartColors: Color[] = [
        {
          borderColor: 'black',
        },
      ];
      stoChartLegend = true;
      stoChartType = 'line';
      stoChartPlugins = [];
    
      constructor() {}
    
      ngOnInit(): void {
        // *** some code here ***
      } 
    
    }

The problem is in the ChartOptions: I keep getting this error:

Type '{ responsive: true; annotation: { annotations: { type: string; mode: string; scaleID: string; value: string; borderColor: string; borderWidth: number; label: { content: string; enabled: boolean; position: string; }; }[]; }; }' is not assignable to type 'ChartOptions & { annotation?: any; }'.
  Type '{ responsive: true; annotation: { annotations: { type: string; mode: string; scaleID: string; value: string; borderColor: string; borderWidth: number; label: { content: string; enabled: boolean; position: string; }; }[]; }; }' is not assignable to type 'ChartOptions'.
    The types of 'annotation.annotations' are incompatible between these types.
      Type '{ type: string; mode: string; scaleID: string; value: string; borderColor: string; borderWidth: number; label: { content: string; enabled: boolean; position: string; }; }[]' is not assignable to type 'AnnotationOptions[]'.
        Type '{ type: string; mode: string; scaleID: string; value: string; borderColor: string; borderWidth: number; label: { content: string; enabled: boolean; position: string; }; }' is not assignable to type 'AnnotationOptions'.
          Type '{ type: string; mode: string; scaleID: string; value: string; borderColor: string; borderWidth: number; label: { content: string; enabled: boolean; position: string; }; }' is not assignable to type 'LineAnnotationOptions'.
            Types of property 'type' are incompatible.
              Type 'string' is not assignable to type '"line"'.

It may be worth noting that import * as annotations from 'chartjs-plugin-annotation'; says 'annotations' is declared but its value is never read.

Answer 1

Per the ChartJS docs and the Annotations ReadMe on Github, it looks like the Annotations plugin needs to be added to a "plugins" object within the "ChartOptions" object.

I would try something like this:

stoChartOptions: (ChartOptions & { annotation?: any }) = {
    responsive: true,
    plugins: {
       annotation: {
          annotations: [
          {
            type: 'line',
            mode: 'vertical',
            scaleID: 'x-axis-0',
            value: '2020-10-05',
            borderColor: 'red',
            borderWidth: 2,
            label: {
              content: 'TODAY',
              enabled: true,
              position: 'top'
            }
          }
        ]
      }
    }
  }; 

Also, you're importing * as annotations. This might need to be changed to annotation in this context, since the first item in the plugins array is the name of the plugin.

https://www.chartjs.org/docs/latest/developers/plugins.html

https://github.com/chartjs/chartjs-plugin-annotation#readme

Answer 2

I think I've figured out what was the problem. Check the answer I've provided to this question. Apparently, I wasn't the only one who had this issue with ng2-charts.