title: ng2-charts - Angular 4 working example
body: <p>I am trying to use ng2-charts with Angular 4.0 and I would like to have the same thing like here by using chart.js:</p>
  
  <pre><code>    ...
      &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.bundle.min.js"&gt;&lt;/script&gt;
      ...
  
      &lt;canvas id="myChart" width="400" height="400"&gt;&lt;/canvas&gt;
      &lt;script&gt;
          var ctx = document.getElementById("myChart").getContext('2d');
          var chart = new Chart(ctx, {
              // The type of chart we want to create
              type: 'horizontalBar',
  
              // The data for our dataset
              data: {
                  labels: ["example1","example2","example3","example4","example5","example6","example7"],
                  datasets: [{
                      label: "My First dataset",
                      backgroundColor: 'rgb(255, 99, 132)',
                      borderColor: 'rgb(255, 99, 132)',
                      data: [0, 10, 5, 2, 20, 30, 45]
                  },{
                      label: "My second dataset",
                      backgroundColor: 'rgb(2, 99, 132)',
                      borderColor: 'rgb(255, 99, 132)',
                      data: [3, 10, 5, 2, 20, 30, 45]
                  }]
              },
  
              // Configuration options go here
              options: {
                  scales: {
                      xAxes: [{
                          stacked: true
                      }],
                      yAxes: [{
                          stacked: true
                      }]
                  }
              }
          });
      &lt;/script&gt;
  </code></pre>
  
  <p>What I have done is</p>
  
  <pre><code>npm install ng2-charts --save
  npm install chart.js --save
  </code></pre>
  
  <p>and I have added</p>
  
  <pre><code>&lt;script src="node_modules/chart.js/src/chart.js"&gt;&lt;/script&gt;
  </code></pre>
  
  <p>to src/index.html</p>
  
  <p>and</p>
  
  <pre><code>import { ChartsModule } from 'ng2-charts';
  
  imports: [
     ChartsModule
  ]
  </code></pre>
  
  <p>to src/app/app.module.ts</p>
  
  <p>Can you show me an working example of src/index.html, src/app/app.component.html and app/component.ts for it? Because I have some problems with it like in example</p>
  
  <pre><code>GET 
  http://localhost:4200/node_modules/chart.js/src/chart.js [HTTP/1.1 404 Not Found 8 ms]
  ERROR Error: "undefined" is not a chart type.
  </code></pre>
  
  <p>even if I change the chart.js location.</p>
  
  <p>src/index.html</p>
  
  <pre><code>&lt;!doctype html&gt;
  &lt;html&gt;
  &lt;head&gt;
    &lt;meta charset="utf-8"&gt;
    &lt;title&gt;Chart&lt;/title&gt;
    &lt;base href="/"&gt;
  
    &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
    &lt;link rel="icon" type="image/x-icon" href="favicon.ico"&gt;
  
    &lt;script src="../node_modules/chart.js/src/chart.js"&gt;&lt;/script&gt;
  
  &lt;/head&gt;
  
  &lt;body&gt;
    &lt;app-root&gt;Loading...&lt;/app-root&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>src/app/app.component.html</p>
  
  <pre><code>&lt;h1&gt;
    {{title}}
  &lt;/h1&gt;
  
      &lt;div style="display: block"&gt;
        &lt;canvas baseChart
                [data]="chartData"
                (chartHover)="chartHovered($event)"
                (chartClick)="chartClicked($event)"&gt;&lt;/canvas&gt;
      &lt;/div&gt;
      &lt;button (click)="randomize()"&gt;Update&lt;/button&gt;
  </code></pre>
  
  <p>src/app/app.component.ts</p>
  
  <pre><code>import { Component } from '@angular/core';
  
  @Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
  })
  export class AppComponent {
    title = 'app works!';
  
    public chartData: Array&lt;any&gt; = [
      [65, 59, 80, 81, 56, 55, 40],
      [28, 48, 40, 19, 86, 27, 90]
    ];
  
  }
  </code></pre>