Home Angular6 How to Include Chartjs in Angular 6?

How to Include Chartjs in Angular 6?

by therichpost

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,
 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.


You may also like


davidw linde January 1, 2019 - 5:10 am

Great, it worked

Ajay Malhotra January 1, 2019 - 4:53 pm

Thank you..


Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.