I'm facing a challenge while attempting to create a vertical line on my ng2-charts chart. To accomplish this, I installed the chartjs-plugin-annotation package. However, it seems to be malfunctioning and I am unable to identify the root cause of the issue.
The setup that I have is quite similar to the example provided 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 error lies in the ChartOptions section: I keep encountering the following issue:
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's worth noting that when I use
import * as annotations from 'chartjs-plugin-annotation';