title: Angular/Chart.js error: Failed to create chart: can't acquire context from the given item
body: <p>This is really my first time using Chart.js and I am importing it into an Angular component. I am trying to at this point just create a simple bar chart. I am getting the following error in my console:</p>
  
  <p><code>core.controller.js:118 Failed to create chart: can't acquire context from the given item</code></p>
  
  <p>not sure what I am doing wrong here!</p>
  
  <p>this is the TS file for my component:</p>
  
  <pre><code>import { Component, OnInit } from '@angular/core';
  import { Chart } from 'chart.js';
  import { data } from './data';
  
  @Component({
    selector: 'app-propel-factor',
    templateUrl: './propel-factor.component.html'
  })
  export class PropelFactorComponent implements OnInit {
  
      chart = [];
      labels: any = [];
  
      data: any = [];
  
      constructor() { }
  
      ngOnInit() {
          data.forEach(item =&gt; {
              this.labels.push(item.name);
              this.data.push(item.value);
          });
  
          this.chart = new Chart('canvas', {
              type: 'bar',
              labels: this.labels,
              data: {
                  labels: this.labels,
                  data: this.data
              },
              options: {
                  responsive: true
              }
          });
      }
  
  }
  </code></pre>
  
  <p>and then my template is simply:</p>
  
  <pre><code>&lt;div *ngIf="chart"&gt;
      &lt;canvas id="canvas"&gt;{{ chart }}&lt;/canvas&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I also wanted to go on record saying that i tried this fix <a href="https://stackoverflow.com/questions/41280857/chart-js-failed-to-create-chart-cant-acquire-context-from-the-given-item">chart.js Failed to create chart: can&#39;t acquire context from the given item</a> and still go the same error!</p>