YogeshChauhan . com

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';

  declarations: [...],
  imports: [
  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';

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

  ngOnInit() {

Step 7

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

<div style="display: block;">
  <canvas baseChart 

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 Solution to “TypeError: ‘x’ is not iterable” in Angular 9 #3 How to add Read More Read Less Button using JavaScript? #4 How to uninstall Cocoapods from the Mac OS? #5 How to Use SQL MAX() Function with Dates? #6 PHP Login System using PDO Part 1: Create User Registration Page

Recently Posted

Jun 16 What are Stored Procedures for SQL Server? Jun 16 What are Class Constants in PHP? Jun 15 A short basic guide on states in React Jun 15 How to define constants in PHP? Jun 15 How to define visibility for a property in PHP? Jun 15 How to use @if and @else in SCSS?

You might also like these

WordPress: How to find all posts with a specific custom field value?WordPressSelect statement in Postgres with examplesPostgresObject destructuring in JavaScript: Unpacking fields from objects passed as function parameterJavaScriptHow to add navigation menu in Angular 9 app?AngularIntroduction to components and templates Part 1: Component MetadataAngularHow to create a link tag button using CSS?CSS