[Chartjs]-Chartjs-plugin-annotations not displayed in angular 5

by

13👍

✅

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

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

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.

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

    };

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

Leave a comment