Using Chart.js on Angular 4

Question

I am trying to use Chart.js with Angular 4, I saw an example in chart.js docs, but it used <script> to pull out the script so that it doesn't work on the component. This is how I tried to fit into Angular:

TS

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() { } } 

HTML

 <canvas id="myChart" width="700" height="400"></canvas> 

Any idea how I will work?

EDIT: I updated my code using import, and now I get an error.

Import Code:

 import * as Chart from 'chart.js' 

Error on chrome console:

 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 <anonymous> 

Answer 1

You can install the package along with types for full functionality in a typewriting environment such as Angular:

npm install --save chart.js && npm install --save-dev @types/chart.js

Then in your component, you can now import * as Chart from 'chart.js' and use it in your typing environment. Check out this example for typing implementation methods.

Since you need to get the canvas from the DOM, you need to make sure that it is rendered before trying to access it. This can be achieved with AfterViewInit .

 import { Component, AfterViewInit } from '@angular/core'; import * as Chart from 'chart.js' export class MyChartComponent implements AfterViewInit { canvas: any; ctx: any; ngAfterViewInit() { this.canvas = document.getElementById('myChart'); this.ctx = this.canvas.getContext('2d'); let 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: {} }); } } 

Answer 2

On my Angular 6.1 site, I use the chart.js file myself in mgechev / angular-seed .

At the time of writing this answer, the developers of Chart.js had to work on exporting their members in accordance with the new standards so that collapsing could be problematic.

To get Chart.js 2.7.x to work after installing the chart.js package and types @types/chart.js in this angular-seed, all I had to do was:

1. Update the project.config.ts file to include ROLLUP_NAMED_EXPORTS to make the cumulative package work correctly (if you use the cumulative package).

    this.ROLLUP_NAMED_EXPORTS = [ ...this.ROLLUP_NAMED_EXPORTS, { 'node_modules/chart.js/src/chart.js': ['Chart'] } ]; 

2. Update project.config.ts to include additional packages. This seed uses the SystemJS configuration. This may be different if you use something else.

    // Add packages const additionalPackages: ExtendPackages[] = [ { name: 'chart.js', path: 'node_modules/chart.js/dist/Chart.bundle.min.js' }, ... ]; 

3. In your component

    import { Chart } from 'chart.js'; ... export class MyComponent implements OnInit { @ViewChild('myChart') myChartRef: ElementRef; chartObj: Chart; ... } 

   Then load the chart configuration into ngOnInit () according to the Chart.js documentation

4. HTML will look something like this:

    <div class="chart-container"> <canvas #myChart></canvas> </div>