Can't bind to 'chartType' since it isn't a known property of 'canvas' with angular12

Question

I have created angular 12 application and trying to include barchart with my application using 'ng2-charts and chart.js'

I have imported NgChartsModule in both app.module.js and my component.module.js file. But, Still I am facing the below error

" Can't bind to 'chartType' since it isn't a known property of 'canvas'"

Package.json

"dependencies": {
"@angular/animations": "~12.2.0",
"@angular/common": "~12.2.0",
"@angular/compiler": "~12.2.0",
"@angular/core": "~12.2.0",
"@angular/forms": "~12.2.0",
"@angular/platform-browser": "~12.2.0",
"@angular/platform-browser-dynamic": "~12.2.0",
"@angular/router": "~12.2.0",
"bootstrap": "^5.0.0-beta3",
"chart.js": "^3.5.1",
"ng2-charts": "^3.0.0-rc.5",
"rxjs": "~6.6.0",
"tslib": "^2.3.0",
"zone.js": "~0.11.4"

}

mycomponent.module.ts

import { Component, OnInit } from '@angular/core';
import { ChartDataset, ChartOptions, ChartType } from 'chart.js';
import { NgChartsModule } from 'ng2-charts'


@Component({
selector: 'app-expence-manipulation',
templateUrl: './expence-manipulation.component.html',
styleUrls: ['./expence-manipulation.component.css']
})
export class ExpenceManipulationComponent implements OnInit {

constructor() { }

ngOnInit(): void {
}

public barChartOptions: ChartOptions = {
   responsive: true,
};
public barChartLabels = ['2006', '2007', '2008', '2009', '2010', 
'2011', '2012'];
public barChartType: ChartType = 'bar';
public barChartLegend = true;
public barChartPlugins = [];

public barChartData: ChartDataset[] = [
{ data: [65, 59, 80, 81, 56, 55, 40], label: 'Series A' },
{ data: [28, 48, 40, 19, 86, 27, 90], label: 'Series B' }
];

}

app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppComponent } from './app.component';
import { ExpenceManipulationComponent } from './expence- 
manipulation/expence-manipulation.component';
import { ExpenceInclusionComponent } from './expence-inclusion/expence- 
inclusion.component';
import { NgChartsModule } from 'ng2-charts';

@NgModule({
declarations: [
AppComponent,
ExpenceManipulationComponent,
ExpenceInclusionComponent
],
imports: [
BrowserModule,
NgChartsModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }

myapp.component.html

 <div style="display: block;">
            <canvas baseChart 
            [datasets]="barChartData"
            [labels]="barChartLabels"
            [options]="barChartOptions"
            [plugins]="barChartPlugins"
            [legend]="barChartLegend"
            [chartType]="barChartType">
          </canvas>
        </div>

please help me to resolve this issue

Answer 1

In your HTML template, you should replace [chartType]="barChartType" by [type]="barChartType".

For further information, please consult Chart types from ng2-charts documentation.