NG2-Charts Can't bind to 'datasets' since it isn't a known property of 'canvas'
Solution 1
Try importing ChartsModule in your app.module.ts like this-
import { ChartsModule } from 'ng2-charts/ng2-charts';
imports: [
.....
ChartsModule
.....
]
Solution 2
I had the very same problem. I found on github that you just have to insert the ChartsModule in the submodule as well. First you add in app.module.ts
and the, in my case, reports.module.ts
.
Solution 3
I'm working with ng2-charts + Angular 7 + Ionic 4, and I spent several hours searching for a solution. And this finally worked to me (after following the initial steps, of course, like installing ng2-charts and charts.js). Just import ChartsModule on the following files:
app.module.ts
import { ChartsModule } from 'ng2-charts';
...
imports: [ChartsModule]
yourPage.module.ts
import { ChartsModule } from 'ng2-charts';
@NgModule({
imports: [
IonicModule,
CommonModule,
FormsModule,
RouterModule.forChild([{ path: '', component: YourPagePage }]),
**ChartsModule**
]
})
I was trying to import it also in yourPage.page.ts, but the solution was to import it in yourPage.module.ts!
Try it out.
Solution 4
i'm working with [email protected]
looks like the property chartType
is now called type
so it should look something like this:
<canvas
style="display: block;background-color: #3a3939;"
width="600"
height="300"
id="canvas"
#myCanvas
baseChart
[type]="lineChartType"
[datasets]="lineChartData"
[labels]="lineChartLabels"
[options]="mfChartOptions"
[legend]="lineChartLegend">
</canvas>
Solution 5
The reason might be: You are using Ng2Charts directly from your child components/module.
Solutions: You have to import the Ng2Charts on your parent module as well. (Import Ng2Charts [ng2-charts], to your parent and child module)
Happy fixing everyone.
Thank you. Marjun Villegas
Raphael Hippe
Updated on July 05, 2022Comments
-
Raphael Hippe almost 2 years
I am trying to use the basic example of NG2-Charts (http://valor-software.com/ng2-charts/)
I copy pasted the HTML part
<div style="display: block"> <canvas baseChart [datasets]="barChartData" [labels]="barChartLabels" [options]="barChartOptions" [legend]="barChartLegend" [chartType]="barChartType" (chartHover)="chartHovered($event)" (chartClick)="chartClicked($event)"></canvas> </div>
and the TypeScript part
private barChartOptions: any = { scaleShowVerticalLines: false, responsive: true }; private barChartLabels: string[] = ['2006', '2007', '2008', '2009', '2010', '2011', '2012']; private barChartType: string = 'bar'; private barChartLegend: boolean = true; private barChartData: any[] = [ { data: [65, 59, 80, 81, 56, 55, 40], label: 'Series A' }, { data: [28, 48, 40, 19, 86, 27, 90], label: 'Series B' } ]; // events private chartClicked(e: any): void { console.log(e); } private chartHovered(e: any): void { console.log(e); }
I run
npm install ng2-charts --save
,npm install chart.js --save
andtypings install dt~chart.js --save --global
I also imported chart.js in my vendor.ts file
import 'chart.js';
My dependencies:
{ "@angular/common": "^2.0.0", "@angular/compiler": "2.0.0", "@angular/core": "2.0.0", "@angular/forms": "2.0.0", "@angular/http": "2.0.0", "@angular/platform-browser": "2.0.0", "@angular/platform-browser-dynamic": "2.0.0", "@angular/router": "3.0.0", "angular2-jwt": "^0.1.18", "chart.js": "^2.3.0", "core-js": "^2.4.0", "json-loader": "^0.5.4", "moment": "^2.14.1", "ng2-charts": "^1.4.0", "reflect-metadata": "0.1.2", "rxjs": "5.0.0-beta.11", "zone.js": "^0.6.23" }
Here is the Error
Unhandled Promise rejection: Template parse errors: Can't bind to 'datasets' since it isn't a known property of 'canvas'. ("iuminfooneoptionsTwo"> <div style="display: block"> <canvas baseChart [ERROR ->][datasets]="barChartData" [labels]="barChartLabels" [options]="barChartOptions" [legend]="barChartLeg"): PlayerprofileComponent@39:34 Can't bind to 'labels' since it isn't a known property of 'canvas'. (" <div style="display: block"> <canvas baseChart [datasets]="barChartData" [ERROR ->][labels]="barChartLabels" [options]="barChartOptions" [legend]="barChartLegend" [chartType]="barChart"): PlayerprofileComponent@39:60 Can't bind to 'options' since it isn't a known property of 'canvas'. ("lay: block"> <canvas baseChart [datasets]="barChartData" [labels]="barChartLabels" [ERROR ->][options]="barChartOptions" [legend]="barChartLegend" [chartType]="barChartType" (chartHover)="chartH"): PlayerprofileComponent@39:86 Can't bind to 'legend' since it isn't a known property of 'canvas'. (" <canvas baseChart [datasets]="barChartData" [labels]="barChartLabels" [options]="barChartOptions" [ERROR ->][legend]="barChartLegend" [chartType]="barChartType" (chartHover)="chartHovered($event)" (chartClick)"): PlayerprofileComponent@39:114 Can't bind to 'chartType' since it isn't a known property of 'canvas'. ("ets]="barChartData" [labels]="barChartLabels" [options]="barChartOptions" [legend]="barChartLegend" [ERROR ->][chartType]="barChartType" (chartHover)="chartHovered($event)" (chartClick)="chartClicked($event)"> "): PlayerprofileComponent@39:140 ; Zone: <root> ; Task: Promise.then ; Value: Error: Template parse errors:(…) Error: Template parse errors: Can't bind to 'datasets' since it isn't a known property of 'canvas'. ("iuminfooneoptionsTwo"> <div style="display: block"> <canvas baseChart [ERROR ->][datasets]="barChartData" [labels]="barChartLabels" [options]="barChartOptions" [legend]="barChartLeg"): PlayerprofileComponent@39:34 Can't bind to 'labels' since it isn't a known property of 'canvas'. (" <div style="display: block"> <canvas baseChart [datasets]="barChartData" [ERROR ->][labels]="barChartLabels" [options]="barChartOptions" [legend]="barChartLegend" [chartType]="barChart"): PlayerprofileComponent@39:60 Can't bind to 'options' since it isn't a known property of 'canvas'. ("lay: block"> <canvas baseChart [datasets]="barChartData" [labels]="barChartLabels" [ERROR ->][options]="barChartOptions" [legend]="barChartLegend" [chartType]="barChartType" (chartHover)="chartH"): PlayerprofileComponent@39:86 Can't bind to 'legend' since it isn't a known property of 'canvas'. (" <canvas baseChart [datasets]="barChartData" [labels]="barChartLabels" [options]="barChartOptions" [ERROR ->][legend]="barChartLegend" [chartType]="barChartType" (chartHover)="chartHovered($event)" (chartClick)"): PlayerprofileComponent@39:114 Can't bind to 'chartType' since it isn't a known property of 'canvas'. ("ets]="barChartData" [labels]="barChartLabels" [options]="barChartOptions" [legend]="barChartLegend" [ERROR ->][chartType]="barChartType" (chartHover)="chartHovered($event)" (chartClick)="chartClicked($event)"> "): PlayerprofileComponent@39:140 at TemplateParser.parse (eval at <anonymous> (http://localhost:8080/vendor.js:623:1), <anonymous>:133:19) at RuntimeCompiler._compileTemplate (eval at <anonymous> (http://localhost:8080/vendor.js:2103:1), <anonymous>:244:51) at eval (eval at <anonymous> (http://localhost:8080/vendor.js:2103:1), <anonymous>:167:83) at Set.forEach (native) at compile (eval at <anonymous> (http://localhost:8080/vendor.js:2103:1), <anonymous>:167:47) at ZoneDelegate.invoke (eval at <anonymous> (http://localhost:8080/polyfills.js:4105:1), <anonymous>:192:28) at Zone.run (eval at <anonymous> (http://localhost:8080/polyfills.js:4105:1), <anonymous>:85:43) at eval (eval at <anonymous> (http://localhost:8080/polyfills.js:4105:1), <anonymous>:451:57) at ZoneDelegate.invokeTask (eval at <anonymous> (http://localhost:8080/polyfills.js:4105:1), <anonymous>:225:37) at Zone.runTask (eval at <anonymous> (http://localhost:8080/polyfills.js:4105:1), <anonymous>:125:47) at drainMicroTaskQueue (eval at <anonymous> (http://localhost:8080/polyfills.js:4105:1), <anonymous>:357:35)
The NG2-Charts website says I need to include this in the HTML
<script src="node_modules/chart.js/src/chart.js"></script>
But I think thats not correct because how would that statement work in a productive minified / built app? I also thought my webpack import statement would already take care of that? I googled around but sadly only found stuff for some Angular 2 Beta version on NG2 Charts.
Does anyone has an idea on how to fix that?
Thanks and Cheers, Raphael Hippe