[Chartjs]-Angular 9 – chartjs-plugin-annotation error

by

2👍

Per the ChartJS docs and the Annotations ReadMe on Github, it looks like the Annotations plugin needs to be added to a "plugins" object within the "ChartOptions" object.

I would try something like this:

stoChartOptions: (ChartOptions & { annotation?: any }) = {
    responsive: true,
    plugins: {
       annotation: {
          annotations: [
          {
            type: 'line',
            mode: 'vertical',
            scaleID: 'x-axis-0',
            value: '2020-10-05',
            borderColor: 'red',
            borderWidth: 2,
            label: {
              content: 'TODAY',
              enabled: true,
              position: 'top'
            }
          }
        ]
      }
    }
  };

Also, you’re importing * as annotations. This might need to be changed to annotation in this context, since the first item in the plugins array is the name of the plugin.

https://www.chartjs.org/docs/latest/developers/plugins.html

https://github.com/chartjs/chartjs-plugin-annotation#readme

0👍

I think I’ve figured out what was the problem. Check the answer I’ve provided to this question. Apparently, I wasn’t the only one who had this issue with ng2-charts.

Leave a comment