title: Chart.js chart doesn't render when using Angular 2
body: <p>I am attempting to use Chart.js 2.0 in an Angular2 application that is written in typescript.  To start with I've just been trying to get the basic chart shown in the documentation to work (see <a href="http://www.chartjs.org/docs/#getting-started-creating-a-chart" rel="nofollow">http://www.chartjs.org/docs/#getting-started-creating-a-chart</a>) but haven't had much luck. My chart object is created but never rendered in the browser.</p>
  
  <p>My Component looks like this:</p>
  
  <pre><code>import {Component,  Input, AfterViewInit, NgZone} from 'angular2/core';
  
  
  declare var Chart;
  
  @Component({
      selector: 'chart',
      templateUrl: '/app/components/chart.template.html'
  })
  
  
  export class ChartComponent implements AfterViewInit {
  
      constructor(private zone: NgZone) { }
  
      ngAfterViewInit() {
          console.log('In the after function')
          this.zone.runOutsideAngular(() =&gt; {
              var ctx = document.getElementById("myChart");
              var myChart = new Chart(ctx, {
                  type: 'bar',
                  data: {
                      labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
                      datasets: [{
                          label: '# of Votes',
                          data: [12, 19, 3, 5, 2, 3]
                      }]
                  },
                  options: {
                      scales: {
                          yAxes: [{
                              ticks: {
                                  beginAtZero: true
                              }
                          }]
                      }
                  }
              });
              console.log(myChart);
          });
  
      }
  }
  </code></pre>
  
  <p>My template is very simple, only one line setting up the canvas:</p>
  
  <pre><code>&lt;canvas id="myChart" width="400" height="400"&gt;&lt;/canvas&gt;
  </code></pre>
  
  <p>I can see from my log statement that the chart object is being created and with the correct data, it just never appears to render in the browser. When I look at the source in Firebug I see:</p>
  
  <pre><code>&lt;chart&gt;
     &lt;iframe style="width: 100%; display: block; border: 0px none; height: 0px; margin: 0px; position: absolute; left: 0px; right: 0px; top: 0px; bottom: 0px;" class="chartjs-hidden-iframe"&gt;&lt;/iframe&gt;
     &lt;canvas style="width: 0px; height: 0px;" width="0" id="myChart" height="0"&gt;&lt;/canvas&gt;
  &lt;/chart&gt;
  </code></pre>
  
  <p>I've tried adding <code>myChart.render()</code> and <code>myChart.draw()</code> but don't seem to see any difference.</p>
  
  <p>Can anyone see what I'm doing wrong?</p>