title: Chart.js v2 charts do not display inside angular 2 (but Chart.js v1 works perfectly)
body: <p>I am rendering a chart inside an angular2 attribute directive (an approach taken by the angular2 team). This approach works with chart.js but not <strong>chart.js 2.x</strong></p>
  
  <p>code for attribute directive is ...</p>
  
  <pre><code>import {Directive, ElementRef, Input} from '@angular/core';
  
  declare var Chart:any;
  
  @Directive({
    selector: '[bargraph]'
  })
  
  export class BarGraphDirective {
  
    el:any;
    myChart:any;
  
    constructor(element:ElementRef) {
      this.el = element.nativeElement;
    }
  
    ngAfterViewInit() {
      var canvas = this.el;
      var ctx = canvas.getContext('2d');
  
      var _data = {
        labels: ["01-01",
          "01-04",
          "01-15",
          "02-03",
          "03-25",
          "04-03",
          "04-14",
          "05-27",
          "05-27",
          "08-03"],
        datasets: [{
          data: [5, 13, 23, 20, 5, 13, 23, 20, 110, 2],
          label: "female",
          borderColor: "rgba(197,23,1,0.8)",
          backgroundColor: "rgba(197,23,1,0.4)",
          hoverBackgroundColor: "rgba(197,23,1,1)",
          borderWidth: 1,
          pointBorderColor: "rgba(197,23,1,1)",
          pointBackgroundColor: "rgba(255,255,255,0.8)",
          pointBorderWidth: 1.5,
          tension: -1,
          yAxisID: "y-axis-1",
        }, ],
      };
  
      var _options = {
        scales: {
          xAxes: [{
            categorySpacing: 0
          }],
          yAxes: [{
            type: "linear",
            display: true,
            position: "left",
            id: "y-axis-1",
          }]
        }
      };
  
      this.myChart = new Chart(ctx, {
        type: "line",
        data: _data,
        options: _options
      });
  
      console.log(ctx);
      console.log(this.myChart);
    }
  }
  </code></pre>
  
  <p>styling is ...</p>
  
  <pre><code>canvas[bargraph] {
    height: 400px !important;
    width: 700px !important;
  }
  </code></pre>
  
  <p>the component using this has ...</p>
  
  <pre><code>&lt;canvas bargraph width="700" height="400"&gt;&lt;/canvas&gt;
  </code></pre>
  
  <p>in the template.</p>
  
  <p>everything is as expected.
  The console.log statements reveal ctx and this.myChart are both defined inside the ngAfterViewInit lifecycle hook.
  There are no errors.
  The graph simply does not display.</p>
  
  <p>PS The Chart.js v2 code works fine outside Angular2 as per this JS Fiddle - <a href="http://jsfiddle.net/beehe4eg/">http://jsfiddle.net/beehe4eg/</a></p>
  
  <p>The only difference between the JSFiddle and my code is the hook into the DOM ...</p>
  
  <pre><code>document.getElementById("barChart") // for the fiddle
  
  element.nativeElement // in my code as per the approach in the angular 2 docs
  </code></pre>
  
  <p>docs for attribute directive and particularly for DOM hook is ...
  <a href="https://angular.io/docs/ts/latest/guide/attribute-directives.html#!#our-first-draft">https://angular.io/docs/ts/latest/guide/attribute-directives.html#!#our-first-draft</a></p>
  
  <p>The element.nativeElement hook works fine for chart.js v1 with angular2 (using an identical approach).</p>
  
  <p>NOTE that github repo ... <a href="https://github.com/valor-software/ng2-charts">https://github.com/valor-software/ng2-charts</a>
  is using chart.js v1 so this doesn't help</p>
  
  <p>Hoping someone out there might know a solution or can fix it! Thanks in advance.</p>