title: Angular2 and ng2-charts does not display any graph
body: <p>i need to implement some charts in my project, built in Angular2 (version 2.4.8), i use ng2-charts (version 1.5.0) and the version used of chart.js is 2.5.0.
  To start, i copied an example code from ng2-charts website and i have no errors, but no charts ... Some breaking changes in ng2-charts with Angular2 ?</p>
  
  <p>My component which use charts : HomeComponent.ts</p>
  
  <pre class="lang-ts prettyprint-override"><code>import { Component, VERSION } from '@angular/core';
  
  @Component({
      selector: 'pulpe-home-cmp',
      templateUrl: './app/components/Home/HomeView.html'
  })
  export class HomeComponent {
  
      constructor(){
          console.log(VERSION.full)
      }
  
      // Doughnut
      public doughnutChartLabels:string[] = ['Download Sales', 'In-Store Sales', 'Mail-Order Sales'];
      public doughnutChartData:number[] = [350, 450, 100];
      public doughnutChartType:string = 'doughnut';
  
      // events
      public chartClicked(e:any):void {
          console.log(e);
      }
  
      public chartHovered(e:any):void {
          console.log(e);
      }
  }
  </code></pre>
  
  <p>View : HomeView.html</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;div style="display: block"&gt;
      &lt;canvas baseChart
          [data]="doughnutChartData"
          [labels]="doughnutChartLabels"
          [chartType]="doughnutChartType"
          (chartHover)="chartHovered($event)" (chartClick)="chartClicked($event)"&gt;                                                                                                 
      &lt;/canvas&gt; 
  &lt;/div&gt;
  </code></pre>
  
  <p>Systemjs : systemjs.config.js</p>
  
  <pre class="lang-js prettyprint-override"><code>map: { ...
      'ng2-charts': 'node_modules/ng2-charts'
  },
  package : {
      'ng2-charts': { main: 'ng2-charts.js', defaultExtension: 'js' }
  }
  </code></pre>
  
  <p>My app module : app.module.ts</p>
  
  <pre class="lang-ts prettyprint-override"><code>import { NgModule } from '@angular/core';
  import { BrowserModule } from '@angular/platform-browser';
  import { PulpeAppComponent } from './app.component';
  import { HomeComponent } from './components/Home/HomeComponent';
  import { MenuBarComponent } from './components/MenuBar/MenuBarComponent';
  import { SigninComponent } from './components/Signin/SigninComponent';
  import { RouterModule } from '@angular/router'
  import { ROUTES } from './app.routes'; // ROUTING HERE!
  import { APP_BASE_HREF } from '@angular/common';
  import { ChartsModule } from 'ng2-charts';
  
  @NgModule({
      imports: [BrowserModule, RouterModule.forRoot(ROUTES), ChartsModule],
      declarations: [
          PulpeAppComponent,
          MenuBarComponent,
          HomeComponent,
          SigninComponent
      ],
      bootstrap: [PulpeAppComponent],
      providers:[
        {provide: APP_BASE_HREF, useValue : '/' }
      ]
  })
  export class PulpeModule {
  }
  </code></pre>
  
  <p>index.html : </p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;script src="node_modules/chart.js/dist/Chart.bundle.js"&gt;&lt;/script&gt;
  </code></pre>
  
  <p>I've tried with src/chart.js like in example of website but that make an error (require is not defined) and with dist/Chart.js but same, a.k.a nothing displayed ...</p>
  
  <p>After 4 hours of searching i turn to you... some ideas ? thanks</p>