[Solved]-chartjs-plugin-annotations not displayed in angular 5-Chart.js

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'
                    }
                }
            ]
        }

    };

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
        },
      ]
    }
  },
}

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.

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