NG2-Charts Can't bind to 'datasets' since it isn't a known property of 'canvas'

Question

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 and typings 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

Answer 1

Try importing ChartsModule in your app.module.ts like this-

import { ChartsModule } from 'ng2-charts/ng2-charts';  imports: [    .....    ChartsModule    ..... ] 

Answer 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.