chartjs-plugin-annotations not displayed in angular 5 - angular5

Question

While using the chart.js and the plugin chartjs-plugin-annotation, annotations are not showing while using angular 5, no error messages are displayed.
I have created a cut down example of code that exhibits the problem
console.log(Chart.plugins) shows the plugin looks to be registered as plugin[3] however it doesn't have an id as the inbuilt ones do, is this a problem?
chart.component.ts
import { Component, Inject } from '#angular/core';
import { Chart } from 'chart.js';
import 'chartjs-plugin-annotation';
#Component({
selector: 'app-chart-component',
templateUrl: './chart.component.html'
})
export class ChartComponent {
public currentCount = 0;
chart : Chart ; // This will hold our chart info
simpleChart() {
console.log(Chart.plugins);
this.chart = new Chart('canvas', {
type: 'line',
data: {
labels: ['0','1','2', '3','4'],
datasets: [
{
data: [0,1,2,5,4,5],
borderColor: "#3cba9f",
fill: false,
},
]
},
options: {
legend: {
display: false
},
scales: {
xAxes: [{
display: true
}],
yAxes: [{
display: true,
id: 'y-axis-0'
},
]
},
plugins: {
annotation: {
annotations: [{
type: 'line',
id: 'hLine',
mode: 'horizontal',
scaleID: 'y-axis-0',
value: 2.5, // data-value at which the line is drawn
borderWidth: 2.5,
borderColor: 'black'
}]
}
}
}
});
}
ngOnInit() {
this.simpleChart();
}
}
Any assistance would be greatly appreciated.

Answer 1

I had some fun trying to get annotations working - in case you haven't already solved it, try this...
Change your imports statement to:
import * as ChartAnnotation from 'chartjs-plugin-annotation';
Change ngOnInit() to:
ngOnInit() {
let namedChartAnnotation = ChartAnnotation;
namedChartAnnotation["id"]="annotation";
Chart.pluginService.register( namedChartAnnotation);
this.simpleChart();
}
Lastly, I believe the annotation object is supposed to be a child of options, not plugins. Mine looks like this:
"options": {
"legend": {
"display": true
},
"scales": {
"xAxes": [{
"display": true
}
],
"yAxes": [{
"display": true,
"ticks": {
"min": 0,
"max": 40
}
}
]
},
"tooltips": {
"enabled": true,
"backgroundColor": "#eee",
"titleFontColor": "#000"
},
"annotation": {
"annotations": [{
"type": "box",
"xScaleID": "x-axis-0",
"yScaleID": "y-axis-0",
"yMin": 0,
"yMax": 15,
"xMin": 864,
"xMax": 1285,
"borderWidth": 1,
"backgroundColor": "rgba(200,60,60,0.25)",
"borderColor": "rgba(200,60,60,0.25)"
}, {
"type": "box",
"xScaleID": "x-axis-0",
"yScaleID": "y-axis-0",
"yMin": 30,
"yMax": 40,
"xMin": 864,
"xMax": 1285,
"borderWidth": 1,
"backgroundColor": "rgba(60,60,200,0.25)",
"borderColor": "rgba(60,60,200,0.25)"
}
]
}
}
Makes for a pretty graph :)
(except I got the colours bass ackwards! Oops!)

Answer 2

As an adition of what Ade said. You can also add the plugin this way
import { ChartOptions } from 'chart.js';
import * as ChartAnnotation from 'chartjs-plugin-annotation';
this.chart = new Chart('canvas', {
...
options: {
...
annotation: { ... }
} as ChartOptions,
plugins: [ChartAnnotation]
});
Adding the {...} as ChartOptions makes that TypeScript doesn't complain

Answer 3

To anyone having a TypeScript error saying that annotation isn't a ChartOptions property. After looking for an answer for a week or two I found a way to fix the issue.
Follow this path: node_modules/#types/chart.js/index.d.ts
Open index.d.ts, locate interface ChartOptions {
and add this line.
annotation?: Object;
}
This is how I fixed my issue after every other solution failed.

Answer 4

I have the same problem recently, I fixed it by registerPlugin under constructor.
Here is my solution:
import the plugin to your component:
import * as annotations from 'chartjs-plugin-annotation';
add this line to your constructor:
constructor(...) { BaseChartDirective.registerPlugin(annotations);}
If you are using typescript you may need to extend the ChartOptions interface with annotation:
interface CustomizeChartOptions extends ChartOptions {
annotation?: any
}
config your chartOptions with annotation
public barChartOptions: CustomizeChartOptions = {
// your other ChartOptions setting here
annotation: {
annotations: [
{
drawTime: "afterDatasetsDraw",
type: 'line',
mode: 'vertical',
scaleID: 'x-axis-0',
value: '1 Dec',
borderColor: 'red',
borderWidth: 2,
label: {
content: 'CURRENT',
enabled: true,
position: 'top'
}
}
]
}
};

Answer 5

I know I am late, but, as of now (ng2-charts 3.0.11), these answers are not working as the API changed. The annotation configuration must now be in plug-ins.
The annotation plug-in must be registered before being used.
Here is what i found, from the examples:
in app.module.ts:
import { NgChartsModule } from 'ng2-charts';
import { default as Annotation } from 'chartjs-plugin-annotation'
// ...
imports: [
//...
NgChartsModule.forRoot({
defaults: {},
plugins: [ Annotation ]
}),
// ...
and then, in your component.ts file:
chartOptions: ChartConfiguration['options'] = {
scales: {
// ...
},
plugins: {
annotation: {
annotations: [
{
type: 'line',
scaleID: 'y',
value: 16,
borderColor: 'green',
borderWidth: 6
},
]
}
},
}