How to add a Pie Chart in Angular App?

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:

Share this post