How to add a Pie Chart in Angular App?
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:


Leave a Reply

Most Read

#1 How to check if radio button is checked or not using JavaScript? #2 How to set opacity or transparency using CSS? #3 Pagination in CSS with multiple examples #4 How to make HTML form interactive and using CSS? #5 Solution to “TypeError: ‘x’ is not iterable” in Angular 9 #6 How to uninstall Cocoapods from the Mac OS?

Recently Posted

Mar 2 How to zoom an element on hover using CSS? Mar 2 the box-sizing property in CSS Mar 2 WordPress: How to access first and random row values from a repeater field in ACF? Mar 1 The basics of CSS Box model Feb 27 WordPress: How to display slider repeater fields in ACF? Feb 26 Simple Page Hit Counter in PHP

You might also like these

How to make a UILabel clickable in Swift 5?SwiftHTML Copyright SymbolHTMLHow to add and remove list items using JavaScript?JavaScript:in-range and :out-of-range selector in CSSCSSHow to change perception and behavior of a person for acceptance of new systems?MiscHow to read Standard Input in Swift?Swift