I did following steps: npm install ng2-charts@next --save
It installed

"ng2-charts": "^3.0.0-rc.7"

npm install chart.js --save
It installed

chart.js": "^2.9.4",

npm install --save-dev ng2-charts-schematics
npm install
ng serve -o
Angular version is 11.2

"@angular/compiler": "11.2.2",
"@angular/core": "11.2.2",
"@angular/forms": "11.2.2",

When the parent component page loads, it throws these errors:

NG0303: Can't bind to 'type' since it isn't a known property of 'canvas'.

   NG0303: Can't bind to 'datasets' since it isn't a known property of 'canvas'.

   NG0303: Can't bind to 'labels' since it isn't a known property of 'canvas'.

   NG0303: Can't bind to 'options' since it isn't a known property of 'canvas'.

   NG0303: Can't bind to 'plugins' since it isn't a known property of 'canvas'.

   NG0303: Can't bind to 'legend' since it isn't a known property of 'canvas'.

What could have gone wrong? this is not working? On expanding this alerts, :
logUnknownPropertyError @ InteractionHandler.ts:10069 elementPropertyInternal @ InteractionHandler.ts:9961 ɵɵproperty @ InteractionHandler.ts:14700 PieChartComponent_Template @ template.html:2 executeTemplate @ InteractionHandler.ts:9545 refreshView @ InteractionHandler.ts:9414 refreshComponent @ InteractionHandler.ts:10580 refreshChildComponents @ InteractionHandler.ts:9211 refreshView @ InteractionHandler.ts:9464 refreshComponent @ InteractionHandler.ts:10580 refreshChildComponents @ InteractionHandler.ts:9211 refreshView @ InteractionHandler.ts:9464 refreshEmbeddedViews @ InteractionHandler.ts:10534 refreshView @ InteractionHandler.ts:9438 refreshComponent @ InteractionHandler.ts:10580 refreshChildComponents @ InteractionHandler.ts:9211 refreshView @ InteractionHandler.ts:9464 refreshEmbeddedViews @ InteractionHandler.ts:10534 refreshView @ InteractionHandler.ts:9438 refreshEmbeddedViews @ InteractionHandler.ts:10534 refreshView @ InteractionHandler.ts:9438 refreshComponent @ InteractionHandler.ts:10580 refreshChildComponents @ InteractionHandler.ts:9211 refreshView @ InteractionHandler.ts:9464 renderComponentOrTemplate @ InteractionHandler.ts:9528 tickRootContext @ InteractionHandler.ts:10754 detectChangesInRootView @ InteractionHandler.ts:10779 detectChanges @ InteractionHandler.ts:22792 tick @ InteractionHandler.ts:29516 (anonymous) @ InteractionHandler.ts:29397 ZoneDelegate.invoke @ zone.js:386 onInvoke @ InteractionHandler.ts:28535 ZoneDelegate.invoke @ zone.js:385 Zone.run @ zone.js:143 run @ InteractionHandler.ts:28419 next @ InteractionHandler.ts:29396 schedulerFn @ InteractionHandler.ts:25889 __tryOrUnsub @ Subscriber.ts:265 next @ Subscriber.ts:207 _next @ Subscriber.ts:139 next @ Subscriber.ts:99 next @ superPropBase.js:70 emit @ InteractionHandler.ts:25879 checkStable @ InteractionHandler.ts:28472 onHasTask @ InteractionHandler.ts:28552 ZoneDelegate.hasTask @ zone.js:441 ZoneDelegate._updateTaskCount @ zone.js:462 Zone._updateTaskCount @ zone.js:284 Zone.runTask @ zone.js:205 drainMicroTaskQueue @ zone.js:601 Promise.then (async) scheduleMicroTask @ zone.js:584 ZoneDelegate.scheduleTask @ zone.js:410 onScheduleTask @ zone.js:294 ZoneDelegate.scheduleTask @ zone.js:400 Zone.scheduleTask @ zone.js:231 Zone.scheduleMicroTask @ zone.js:251 scheduleResolveOrReject @ zone.js:881 resolvePromise @ zone.js:819 (anonymous) @ zone.js:739 webpackJsonpCallback @ bootstrap:25 (anonymous) @ layouts-admin-layout-admin-layout-module.js:1 Show 20 more frames InteractionHandler.ts:10069
Pie chart html:
<canvas baseChart [type]="'pie'" [datasets]="pieChartDatasets" [labels]="pieChartLabels" [options]="pieChartOptions" [plugins]="pieChartPlugins" [legend]="pieChartLegend">
Pie chart ts file
import { Component } from '@angular/core'; import { ChartType, ChartOptions } from 'chart.js'; // import { SingleDataSet, Label, monkeyPatchChartJsLegend, monkeyPatchChartJsTooltip } from 'ng2-charts';
@Component({ selector: 'app-pie-chart', templateUrl: './pie-chart.component.html', styleUrls: ['./pie-chart.component.css'] })
export class PieChartComponent {
// Pie public pieChartOptions: ChartOptions<'pie'> = { responsive: false, }; public pieChartLabels = [ [ 'Download', 'Sales' ], [ 'In', 'Store', 'Sales' ], 'Mail Sales' ]; public pieChartDatasets = [ { data: [ 300, 500, 100 ] } ]; public pieChartLegend = true; public pieChartPlugins = []; }
module.ts has these:
import { PieChartComponent} from 'src/app/components/pie-chart/pie-chart.component';
declarations: [ PieChartComponent ]
Parent html file have <app-pie-chart></app-pie-chart>
Please Suggest? https://github.com/valor-software/ng2-charts/issues/1459 [Issue on official Github]