[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