title: NG2-Charts Can't bind to 'datasets' since it isn't a known property of 'canvas'
body: <p>I am trying to use the basic example of NG2-Charts (<a href="http://valor-software.com/ng2-charts/">http://valor-software.com/ng2-charts/</a>)</p>
  
  <p>I copy pasted the HTML part</p>
  
  <pre><code>  &lt;div style="display: block"&gt;
      &lt;canvas baseChart
          [datasets]="barChartData"
          [labels]="barChartLabels"
          [options]="barChartOptions"
          [legend]="barChartLegend"
          [chartType]="barChartType"
          (chartHover)="chartHovered($event)"
          (chartClick)="chartClicked($event)"&gt;&lt;/canvas&gt;
    &lt;/div&gt;
  </code></pre>
  
  <p>and the TypeScript part</p>
  
  <pre><code>  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);
    }
  </code></pre>
  
  <p>I run <code>npm install ng2-charts --save</code>, <code>npm install chart.js --save</code> and <code>typings install dt~chart.js --save --global</code></p>
  
  <p>I also imported chart.js in my vendor.ts file</p>
  
  <pre><code>import 'chart.js';
  </code></pre>
  
  <p>My dependencies: </p>
  
  <pre><code>{
      "@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"
    }
  </code></pre>
  
  <p>Here is the Error</p>
  
  <pre><code>Unhandled Promise rejection: Template parse errors:
  Can't bind to 'datasets' since it isn't a known property of 'canvas'. ("iuminfooneoptionsTwo"&gt;
              &lt;div style="display: block"&gt;
                  &lt;canvas baseChart [ERROR -&gt;][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'. ("          &lt;div style="display: block"&gt;
                  &lt;canvas baseChart [datasets]="barChartData" [ERROR -&gt;][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"&gt;
                  &lt;canvas baseChart [datasets]="barChartData" [labels]="barChartLabels" [ERROR -&gt;][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'. ("  &lt;canvas baseChart [datasets]="barChartData" [labels]="barChartLabels" [options]="barChartOptions" [ERROR -&gt;][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 -&gt;][chartType]="barChartType" (chartHover)="chartHovered($event)" (chartClick)="chartClicked($event)"&gt;
  "): PlayerprofileComponent@39:140 ; Zone: &lt;root&gt; ; 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"&gt;
              &lt;div style="display: block"&gt;
                  &lt;canvas baseChart [ERROR -&gt;][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'. ("          &lt;div style="display: block"&gt;
                  &lt;canvas baseChart [datasets]="barChartData" [ERROR -&gt;][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"&gt;
                  &lt;canvas baseChart [datasets]="barChartData" [labels]="barChartLabels" [ERROR -&gt;][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'. ("  &lt;canvas baseChart [datasets]="barChartData" [labels]="barChartLabels" [options]="barChartOptions" [ERROR -&gt;][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 -&gt;][chartType]="barChartType" (chartHover)="chartHovered($event)" (chartClick)="chartClicked($event)"&gt;
  "): PlayerprofileComponent@39:140
      at TemplateParser.parse (eval at &lt;anonymous&gt; (http://localhost:8080/vendor.js:623:1), &lt;anonymous&gt;:133:19)
      at RuntimeCompiler._compileTemplate (eval at &lt;anonymous&gt; (http://localhost:8080/vendor.js:2103:1), &lt;anonymous&gt;:244:51)
      at eval (eval at &lt;anonymous&gt; (http://localhost:8080/vendor.js:2103:1), &lt;anonymous&gt;:167:83)
      at Set.forEach (native)
      at compile (eval at &lt;anonymous&gt; (http://localhost:8080/vendor.js:2103:1), &lt;anonymous&gt;:167:47)
      at ZoneDelegate.invoke (eval at &lt;anonymous&gt; (http://localhost:8080/polyfills.js:4105:1), &lt;anonymous&gt;:192:28)
      at Zone.run (eval at &lt;anonymous&gt; (http://localhost:8080/polyfills.js:4105:1), &lt;anonymous&gt;:85:43)
      at eval (eval at &lt;anonymous&gt; (http://localhost:8080/polyfills.js:4105:1), &lt;anonymous&gt;:451:57)
      at ZoneDelegate.invokeTask (eval at &lt;anonymous&gt; (http://localhost:8080/polyfills.js:4105:1), &lt;anonymous&gt;:225:37)
      at Zone.runTask (eval at &lt;anonymous&gt; (http://localhost:8080/polyfills.js:4105:1), &lt;anonymous&gt;:125:47)
      at drainMicroTaskQueue (eval at &lt;anonymous&gt; (http://localhost:8080/polyfills.js:4105:1), &lt;anonymous&gt;:357:35)
  </code></pre>
  
  <p>The NG2-Charts website says I need to include this in the HTML</p>
  
  <pre><code>&lt;script src="node_modules/chart.js/src/chart.js"&gt;&lt;/script&gt;
  </code></pre>
  
  <p>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. </p>
  
  <p>Does anyone has an idea on how to fix that? </p>
  
  <p>Thanks and Cheers, 
  Raphael Hippe</p>