Accepted answer

Hopefully this helps others:

The error was a result of the axis min value not being defaulted to zero. Once that was applied to the axes all functions as expected.


Ok, I'm using Angular V13 with chart.js v 3.7 and chartjs-plugin-datalabels v 2. I struggled a lot trying to get things working. The problem was not errors, but the labels were just not appearing. Turned out that I had to add .default to the plugin reference:

public chartPlugins = [pluginDataLabels.default];

Now you can bind this chartPlugins variable to the canvas:

 <canvas baseChart

And then it works!

enter image description here


I know this isn't exactly the same problem that the OP had, but I had a bit of trouble with the Angular CLI compiling the code properly.


  "projects": {
    "myProject": {
      "architect": {
        "build": {
          "options": {
            "scripts": [

create index.d.ts file with contents:

declare module 'chartjs-plugin-datalabels'

import as follows:

import ChartDataLabels from 'chartjs-plugin-datalabels';


install chartjs-plugin-datalabel by

npm install chartjs-plugin-datalabels --save

Then import the same in component by

import ChartDataLabels from 'chartjs-plugin-datalabels';

and add


This worked for me . Hope it will work.

Related Query

More Query from same tag