Yogesh Chauhan's Blog

How to add a Pie Chart in Angular App?

in Angular on June 19, 2020

There are few plugins available to add a Pie Chart in Angular App.

In this article, I am going to use ng2-charts, which is an open-source JS library, and it is exclusively built for Angular 2 and later versions. I have tested the code and it works for Angular 9.

It is easily installable via npm and creates really amazing charts in few minutes.

The ng2-charts supports Chart.js.

Let’s make an app with just Linie Chart so that it will be easily understandable.

Step 1


//make new angular app

ng new pie-chart-app

Step 2


// go inside app folder

cd pie-chart-app

Step 3


// create angular component 

ng g c pie-chart

where g c stands for globally create.

Step 4


// install ng2-charts and Chart js via npm

npm install ng2-charts chart.js --save

Step 5

This is an important step and you must have done it many times. After you create a new component and add a module, you need to import it to app.module.ts file.

Import ChartsModule like this example code.


import { ChartsModule } from 'ng2-charts';

@NgModule({
  declarations: [...],
  imports: [
    ChartsModule,
    ...
  ],
  providers: [...],
  bootstrap: [...]
})

export class AppModule { }

Step 6

Go to pie-chart.component.ts file and add the code below.


import { Component, OnInit } from '@angular/core';
import { ChartType, ChartOptions } from 'chart.js';
import { SingleDataSet, Label, monkeyPatchChartJsLegend, monkeyPatchChartJsTooltip } from 'ng2-charts';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  // Pie
  public pieChartOptions: ChartOptions = {
    responsive: true,
  };
  public pieChartLabels: Label[] = [['Download', 'Sales'], ['In', 'Store', 'Sales'], 'Mail Sales'];
  public pieChartData: SingleDataSet = [300, 500, 100];
  public pieChartType: ChartType = 'pie';
  public pieChartLegend = true;
  public pieChartPlugins = [];

  constructor() {
    monkeyPatchChartJsTooltip();
    monkeyPatchChartJsLegend();
  }

  ngOnInit() {
  }
}

Step 7

Go to pie-chart.component.html file and add this code:


<div style="display: block;">
  <canvas baseChart 
    [data]="pieChartData" 
    [labels]="pieChartLabels" 
    [chartType]="pieChartType"
    [options]="pieChartOptions"
    [plugins]="pieChartPlugins"
    [legend]="pieChartLegend">
  </canvas>
</div>

Open the app in browser, it should look like this:


Most Read

#1 How to check if radio button is checked or not using JavaScript? #2 How to add Read More Read Less Button using JavaScript? #3 Solution to “TypeError: ‘x’ is not iterable” in Angular 9 #4 How to uninstall Cocoapods from the Mac OS? #5 PHP Login System using PDO Part 1: Create User Registration Page #6 How to Use SQL MAX() Function with Dates?

Recently Posted

#Jan 17 4 advanced ways to search Colleague #Jan 16 Colleague UI Basics: The Search Area #Jan 16 Colleague UI Basics: The Context Area #Jan 16 Colleague UI Basics: Accessing the user interface #Jan 14 How to display a student’s individual transcript in Colleague? #Jan 11 How to install PuTTY on a MacOS?
You might also like these
How to Sort (Shuffle) an Array in Random Order in JavaScript?JavaScriptPHP arrays for US states’ full names and abbreviationsPHPFull and Partial CUBE in Postgres with ExamplesPostgresHow to create a flip pricing table using CSS and JavaScript?CSSHow to get recent posts in WordPress?WordPressQuery to increment or decrement value in MySQL ignoring negative valuesSQL/MySQL