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


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


Yes, i 

import { ChartsModule } from 'ng2-charts';
and
import { Chart } from 'chart.js';
 

Yes, i 

import { ChartsModule } from 'ng2-charts';
and
import { Chart } from 'chart.js';
 

Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue
  • 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