Topic: Can't bind to 'chartType' since it isn't a known property of 'canvas'.
renatoveronese asked 6 years ago
I'm trying to put a pie chart in my page using the mdb, but i receive:
Can't bind to 'chartType' since it isn't a known property of 'canvas'.
I try to put exactly code that have in the pie chart mdb:
<div style="display: block">
<canvas mdbChart
[chartType]="chartType"
[datasets]="chartDatasets"
[labels]="chartLabels"
[colors]="chartColors"
[options]="chartOptions"
[legend]="true"
(chartHover)="chartHovered($event)"
(chartClick)="chartClicked($event)">
</canvas>
</div>
In the TS:
public chartType: string = 'pie';
public chartDatasets: Array<any> = [
{ data: [300, 50, 100, 40, 120], label: 'My First dataset' }
];
public chartLabels: Array<any> = ['Red', 'Green', 'Yellow', 'Grey', 'Dark Grey'];
public chartColors: Array<any> = [
{
backgroundColor: ['#F7464A', '#46BFBD', '#FDB45C', '#949FB1', '#4D5360'],
hoverBackgroundColor: ['#FF5A5E', '#5AD3D1', '#FFC870', '#A8B3C5', '#616774'],
borderWidth: 2,
}
];
public chartOptions: any = {
responsive: true
};
public chartClicked(e: any): void { }
public chartHovered(e: any): void { }
There's something special that i have to do?
Thanks
Damian Gemza staff answered 6 years ago
Dear @renatoveronese
Please do not import ChartsModule from ng2-charts.
Instead of it, please import ChartsModule from 'ng-uikit-pro-standard' or 'angular-bootstrap-md' (ng-uikit-pro-standard is a pro version, and angular-bootstrap-md is a free version).
Best Regards,
Damian
Damian Gemza staff answered 6 years ago
Dear @renatoveronese
Could you please tell me, if you have installed chart.js and @types/chart.js in your application?
I have tried to reproduce your problem on fresh MDB Angular application, and I didn't encounter your problem.
Best Regards,
Damian
shahnisargweb commented 3 years ago
chart js and ng 2-charts requireded to install or not i also face same problem in this pl help me out
renatoveronese answered 6 years ago
renatoveronese answered 6 years ago
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- User: Free
- Premium support: No
- Technology: MDB Angular
- MDB Version: 7.0.0
- Device: Desktop
- Browser: Opera
- OS: Windows 10
- Provided sample code: Yes
- Provided link: No