How to Include Chartjs in Angular 6?

Hello to all, welcome to therichpost.com. In this post, I will tell you, How to Include Chartjs in Angular 6?

Angular 6 is growing very fastly.  I have shared some tutorials for Angular 6 and today I am coming with chart js  with  Angular 6.

Chartjs is very popular javascript open source library.

Here is the working picture:

Here are the following step to include chart.js in Angular 6:

1. First you need to run below command into your terminal to include chartjs package into your angular 6 app:

npm install --save chart.js

2. After that, add below code into your app.component.ts file:

import {Component, AfterViewInit} from '@angular/core';
import * as Chart from 'chart.js'
export class AppComponent {
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: {
        responsive: false,
        display:true
      }
    });
  } 
}

 3. Finally add below code into your app.component.html file:

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

 And you are done, if you have any query related to this post, then you can ask questions or comment below.