score:13

Accepted answer

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 :)

image of graph produced with above options

(except i got the colours bass ackwards! oops!)

score:0

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';
  1. add this line to your constructor:
constructor(...) { basechartdirective.registerplugin(annotations);} 
  1. if you are using typescript you may need to extend the chartoptions interface with annotation:
interface customizechartoptions extends chartoptions {
    annotation?: any
}
  1. 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'
                    }
                }
            ]
        }

    };

score:0

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

score:4

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.

score:7

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


Related Query

More Query from same tag