title: Why isn't my Angular 4 ChartJS component rendering?
body: <p>I'm trying to figure out why why angular 4 ChartJS component isn't rendering.</p>
  
  <p>I've installed the package using yarn, and it exists and imports correctly. I can see the Chart object in the chrome console, but the canvas element remains blank.</p>
  
  <pre><code>import {Component, ElementRef, OnInit, ViewChild} from '@angular/core';
  import Chart from 'chart.js';
  
  @Component({
    selector: 'app-root',
    template: '&lt;canvas #aChart&gt;&lt;/canvas&gt;',
    styleUrls: ['./app.component.css']
  })
  
  export class AppComponent implements OnInit {
    @ViewChild('aChart') htmlChart: ElementRef;
    public data = {
      labels: [
        'Value A',
        'Value B'
      ],
      datasets: [
        {
          'data': [101342, 55342],   // Example data
          'backgroundColor': [
            '#1fc8f8',
            '#76a346'
          ]
        }]
    };
  
    constructor(public myElement: ElementRef) {}
  
    ngOnInit() {
      const ctx: CanvasRenderingContext2D = this.htmlChart.nativeElement.getContext('2d');
      const newChart: Chart = new Chart(ctx, {
        'type': 'doughnut',
        'data': this.data,
        'options': {
          'cutoutPercentage': 50,
          'animation': {
            'animateScale': true,
            'animateRotate': false
          }
        }
      });
      console.log('chart', newChart);
    }
  }
  </code></pre>