chartjs-plugin-annotations not displayed in angular 5

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

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

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 3

I have the same problem recently, I fixed it by registerPlugin under constructor.

Here is my solution:

1. import the plugin to your component:

import * as annotations from 'chartjs-plugin-annotation';

2. add this line to your constructor:

constructor(...) { BaseChartDirective.registerPlugin(annotations);} 

3. If you are using typescript you may need to extend the ChartOptions interface with annotation:

interface CustomizeChartOptions extends ChartOptions {
    annotation?: any
}

4. 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 4

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