Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Using Chart.js on Angular 4

Tags:

I'm trying to use Chart.js with Angular 4, I saw an example on the chart.js documents but it's using a < script > tag to pull the script so 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 would make it work?

EDIT: I have updated my code with the import and I'm now receiving 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> 
like image 935
Gustavo Avatar asked Sep 20 '17 17:09

Gustavo


People also ask

Can I use chart JS in Angular?

Data visualization methods can help group your data in one place and show it in a way that is easy to understand for all, especially in the form of charts. AngularJS provides integration with chart js, which is a popular medium for using visualization tools on your data.

Which is better D3 or chart JS?

Chart. js provides a selection of ready to go charts which can be styled and configured while D3 offers building blocks which are combined to create virtually any data visualisation.

Which chart is best for Angular?

FusionCharts is one of the leading open-source Angular chart libraries available. This is because it fulfills your data visualization needs and seamlessly integrates into your web applications. It also makes it easy to build your visualizations.

Is Chart JS free to use?

Chart.js is a free, open-source JavaScript library for data visualization, which supports eight chart types: bar, line, area, pie (doughnut), bubble, radar, polar, and scatter.


2 Answers

In my Angular 6.1 site, I am using chart.js by itself in mgechev/angular-seed.

As of writing this response, Chart.js developers have some work to do to make exporting its members compliant with newer standards so rollups may be problematic.

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

  1. Update project.config.ts to include ROLLUP_NAMED_EXPORTS to get rollup to work properly (if you're using a rollup).

    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 SystemJS config. This might vary if you're using 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 chart configuration in ngOnInit() per Chart.js documentation

  4. HTML will look something like this:

    <div class="chart-container">    <canvas #myChart></canvas> </div> 
like image 32
Dave Skender Avatar answered Oct 26 '22 17:10

Dave Skender


You can install the package, along with the types for full functionality in a typescript 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 typescript environment. Check out this example for implementation methods using typescript.

Because you need to get the canvas from the DOM you need to make sure it's rendered before attempting to access it. This can be accomplished 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: {}     });   }  } 
like image 90
Z. Bagley Avatar answered Oct 26 '22 19:10

Z. Bagley