Type 'Record<string, unknown>[]' is not assignable to type 'Plugin<any, AnyO-CodePudding

I am trying to implement chartJS in my angular project and I am using ng2-charts. When I follow the documentation written here: https://valor-software.com/ng2-charts/#GeneralInfo my project breaks down when registering the DatalabelsPlugin plugin.

package.jon

{
 "@agm/core": "3.0.0-beta.0",
 "@angular-builders/jest": "12.1.2",
 "@angular/animations": "^14.2.12",
 "@angular/cdk": "12.1.0",
 "@angular/common": "^14.2.12",
 "@angular/compiler": "^14.2.12",
 "@angular/core": "^14.2.12",
"chart.js": "3.9.1",
"chartjs-plugin-datalabels": "1.0.0",
"ng2-charts": "4.1.1",
}

my module where I import ng2-charts

import { NgChartsModule } from 'ng2-charts';

....

imports: [
    NgChartsModule
  ],

my ts:

import DatalabelsPlugin from 'chartjs-plugin-datalabels';

export class ClientInfoTabComponent implements OnInit {
  public pieChartPlugins = [ DatalabelsPlugin ];
}

my template:

  <canvas baseChart 
        [plugins]="pieChartPlugins">
</canvas>

What have I tried:

I have doubt that my versions are not right in some of the documentation it is mentioned that I need to register the plugin but when I tried this I also get errors ( I have tried different syntax on how to register plugin as described here: How to import Chart.js chartjs-plugin-datalabels npm package into an Angular 7 project but with no luck.

I have also instaled typescript definitions for chart.js (didn't help) The error I get is this one:

10 - error TS2322: Type 'Record<string, unknown>[]' is not assignable to type 'Plugin<any, AnyObject>[]'.

EDIT: this problem is gone after I add type any to pieChartPlugins like this:

public pieChartPlugins: any = [ DatalabelsPlugin ];

but now I have another error:

main.js:1 ERROR Error: Uncaught (in promise): ReferenceError: Cannot access 'Ja' before initialization
ReferenceError: Cannot access 'Ja' before initialization

Thank you!

CodePudding user response：

chartjs-plugin-datalabels 1.0.0 is old and says it depends on Chart.js 2.x. Its type definitions (and, probably, its implementation) appear to be incompatible with Chart.js 3.x.