I encountered an issue with my Chart Component where I am seeing the error message below. I have successfully imported ChartsModule into my app.module.ts file, but I am unsure why this error is occurring?
Can't bind to 'ChartType' since it isn't a known property of 'canvas'. ("
[options]="barChartOptions"
[legend]="barChartLegend"
[ERROR ->][ChartType]="barChartType">
Sharing my chart.component.ts file for reference:
const SAMPLE_BARCHART_DATA: any[] = [
{ data: [65, 59, 80, 81, 57, 54, 30], label: 'Fall Sales'},
{ data: [25, 39, 20, 41, 56, 53, 30], label: 'Spring Sales'},
];
const SAMPLE_BARCHART_LABELS: string[] = ['w1', 'w2' , 'w3', 'w4', 'w5', 'w6', 'w7'];
@Component({
selector: 'app-bar-chart',
templateUrl: './bar-chart.component.html',
styleUrls: ['./bar-chart.component.css']
})
export class BarChartComponent implements OnInit {
constructor() { }
public barChartData: any[] = SAMPLE_BARCHART_DATA;
public barChartLabels: string[] = SAMPLE_BARCHART_LABELS;
public barChartType = 'bar';
public barChartLegend = false;
public barChartOptions: any = {
scaleShowVerticalLines: false,
responsive: true
};
ngOnInit() {
}
}
Below is the HTML template code for my component:
<canvas baseChart
[datasets]="barChartData"
[labels]="barChartLabels"
[options]="barChartOptions"
[legend]="barChartLegend"
[ChartType]="barChartType">
</canvas>
</div>
Adding the necessary imports in the app.module.ts file:
import { NgModule } from '@angular/core';
import { RouterModule} from '@angular/router';
import { appRoutes } from '../routes';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { NavbarComponent } from './navbar/navbar.component';
import { SidebarComponent } from './sidebar/sidebar.component';
import { SectionDashboardComponent } from './Sections/section-dashboard/section-dashboard.component';
import { SectionComputerManagementComponent } from './Sections/section-computer-management/section-computer-management.component';
import { SectionHelpdeskLinksComponent } from './Sections/section-helpdesk-links/section-helpdesk-links.component';
import { BarChartComponent } from './charts/bar-chart/bar-chart.component';
import { LineChartComponent } from './charts/line-chart/line-chart.component';
import { PieChartComponent } from './charts/pie-chart/pie-chart.component';
import { ChartsModule } from 'ng2-charts';
@NgModule({
declarations: [
AppComponent,
NavbarComponent,
SidebarComponent,
SectionDashboardComponent,
SectionComputerManagementComponent,
SectionHelpdeskLinksComponent,
BarChartComponent,
LineChartComponent,
PieChartComponent
],
imports: [
BrowserModule,
AppRoutingModule,
RouterModule.forRoot(appRoutes),
ChartsModule,
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
Additionally, including styles and scripts in angular.json file:
"styles": [
"../ngsight/node_modules/bootstrap/dist/css/bootstrap.min.css",
"src/styles.css"
],
"scripts": [
"../ngsight/node_modules/jquery/dist/jquery.min.js",
"../ngsight/node_modules/popper.js/dist/umd/popper.min.js",
"../ngsight/node_modules/chart.js/dist/chart.min.js",
"../ngsight/node_modules/bootstrap/dist/js/bootstrap.min.js",
"../ngsight/node_modules/chart.js/dist/Chart.bundle.min.js"
],