title: Using Chart.js on Angular 4
body: <p>I'm trying to use Chart.js with Angular 4, I saw an example on the chart.js documents but it's using a &lt; script > tag to pull the script so it doesn't work on the component. This is how I tried to fit into Angular:</p>
  
  <p><strong>TS</strong></p>
  
  <pre><code>export class GraphicsComponent implements OnInit {
  
    ctx = document.getElementById("myChart");
    myChart = new Chart(this.ctx, {
      type: 'pie',
      data: {
          labels: ["New", "In Progress", "On Hold"],
          datasets: [{
              label: '# of Votes',
              data: [1,2,3],
              backgroundColor: [
                  'rgba(255, 99, 132, 1)',
                  'rgba(54, 162, 235, 1)',
                  'rgba(255, 206, 86, 1)'
              ],
              borderWidth: 1
          }]
      },
      options: {
        responsive: false,
        display:true
      }
    });
  
    constructor() { }
  
    ngOnInit() {
    }
  
  }
  </code></pre>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;canvas id="myChart" width="700" height="400"&gt;&lt;/canvas&gt;
  </code></pre>
  
  <p>Any idea how I would make it work?</p>
  
  <p><strong>EDIT:</strong> I have updated my code with the import and I'm now receiving an error.</p>
  
  <p><strong>Import Code:</strong></p>
  
  <pre><code>import * as Chart from 'chart.js'
  </code></pre>
  
  <p><strong>Error on chrome console:</strong></p>
  
  <pre><code>ERROR Error: Uncaught (in promise): TypeError: Cannot read property 'length' of null
  TypeError: Cannot read property 'length' of null
      at Object.acquireContext (platform.dom.js:333)
      at Chart.construct (core.controller.js:74)
      at new Chart (core.js:42)
      at new GraphicsComponent (graphics.component.ts:12)
      at createClass (core.es5.js:10922)
      at createDirectiveInstance (core.es5.js:10756)
      at createViewNodes (core.es5.js:12197)
      at createRootView (core.es5.js:12092)
      at callWithDebugContext (core.es5.js:13475)
      at Object.debugCreateRootView [as createRootView] (core.es5.js:12792)
      at Object.acquireContext (platform.dom.js:333)
      at Chart.construct (core.controller.js:74)
      at new Chart (core.js:42)
      at new GraphicsComponent (graphics.component.ts:12)
      at createClass (core.es5.js:10922)
      at createDirectiveInstance (core.es5.js:10756)
      at createViewNodes (core.es5.js:12197)
      at createRootView (core.es5.js:12092)
      at callWithDebugContext (core.es5.js:13475)
      at Object.debugCreateRootView [as createRootView] (core.es5.js:12792)
      at resolvePromise (zone.js:795)
      at resolvePromise (zone.js:766)
      at zone.js:844
      at ZoneDelegate.webpackJsonp.../../../../zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:425)
      at Object.onInvokeTask (core.es5.js:3881)
      at ZoneDelegate.webpackJsonp.../../../../zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:424)
      at Zone.webpackJsonp.../../../../zone.js/dist/zone.js.Zone.runTask (zone.js:192)
      at drainMicroTaskQueue (zone.js:602)
      at &lt;anonymous&gt;
  </code></pre>