[Chartjs]-Using chartjs-plugin-annotation with ng2-charts

by

2👍

It’s not obvious but after installing npm install chartjs-plugin-annotation --save you should register it in yot Chart.js.
You can do this directly in the component where you create the chart:

import { Chart } from 'chart.js';
import { default as Annotation } from 'chartjs-plugin-annotation';

  ngOnInit() {
    Chart.register(Annotation);
  }

Now you can use annotation features by putting them into the plugins section:

const chartOptions = {
  plugins: {
    annotation: {
      annotations: [{
        type: 'line',
        mode: 'horizontal',
        yMin: 6,
        yMax: 6,
      }]
    }
  }
};

-1👍

I’m not sure if annotations is not working with your ng2-charts setup at all, or it is just those red boxes that doesn’t work for you. My answer will apply, getting the annotation plugin working.

Was facing the same issue, but found a working example.
Obviously you need to install the annotation plugin:

npm install chartjs-plugin-annotation

After that you can copy the implementation demonstrated below directly.
Line Chart with annotation example

Just copy the Markup and TypeScript. Editing only 2 files, is enough.
No further configurations required. I just tested this working myself.

Leave a comment