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, in case if you don't know smiley

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 must look like this:


Leave a reply

Your email address will not be published. required fields are marked *