[Solved]-angular 5 chart.js datalabels plugin-Chart.js

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!

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';

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.