[Chartjs]-Angular 5 chart.js datalabels plugin

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

labels:[]
..
datasets[]
..
plugin:[ChartDataLabels]

This worked for me . Hope it will work.

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.

angular.json:

{
  "projects": {
    "myProject": {
      "architect": {
        "build": {
          "options": {
            "scripts": [
              "node_modules/chartjs-plugin-datalabels/dist/chartjs-plugin-datalabels.js"`

create index.d.ts file with contents:

declare module 'chartjs-plugin-datalabels'

import as follows:

import ChartDataLabels from 'chartjs-plugin-datalabels';

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
 [data]="lineChartData"
 [options]="lineChartOptions"
 [type]="lineChartType"
 [plugins]="chartPlugins"
 (chartHover)="chartHovered($event)"
 (chartClick)="chartClicked($event)"></canvas>

And then it works!