Angular 12/11 Pie Chart Tutorial with ng2-charts Example

Angular 11/12 charts js pie chart example. In this tutorial, you will learn step by step how to create pie chart using charts js library in angular 11/12 app.

Pie chart is a graphic representation of quantitative information by means of a circle divided into sectors, in which the relative sizes of the areas (or central angles) of the sectors corresponding to the relative sizes or proportions of the quantities. Also called circle graph, pie graph.

And also, this tutorial will show you How to integrate create chart using charts js Angular 11/12 application.

Angular 12/11Pie Chart Using Chart JS Example

• Step 1 – Create New Angular App
• Step 2 – Install Charts JS Library
• Step 3 – Add Code on App.Module.ts File
• Step 4 – Add Code on View File
• Step 5 – Add Code On pie-chart.Component ts File
• Step 6 – Start the Angular Pie Chart App

Step 1 – Create New Angular App

First of all, open your terminal and execute the following command on it to install angular app:

ng new my-new-app

Step 2 – Install Charts JS Library

Then install NPM package called ng2-charts chart.js –save for implement Pie chart in angular 11 app. So, You can install the packages by executing the following commands on the terminal:

npm install --save bootstrap

npm install ng2-charts chart.js --save

After that, open angular.json file and update the following code into it:

"styles": [
      "node_modules/bootstrap/dist/css/bootstrap.min.css",
      "src/styles.css"
]

Step 3 – Add Code on App.Module.ts File

In this step, visit src/app directory and open app.module.ts file. And then add the following lines of into app.module.ts file:

import { ChartsModule } from 'ng2-charts';

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

export class AppModule { }

Step 4 – Add Code on View File

In this step, create pie chart in angular 11 app. So, visit src/app/ and pie-chart.component.htmland update the following code into it:

<div class="chart-wrapper">
    <canvas baseChart 
    [data]="pieChartData" 
    [labels]="pieChartLabels" 
    [chartType]="pieChartType"
    [options]="pieChartOptions"
    [plugins]="pieChartPlugins"
    [legend]="pieChartLegend">
  </canvas>
</div>

Step 5 – Add Code On pie-chart.Component ts File

In this step, visit the src/app directory and open pie-chart.component.ts. Then add the following code into component.ts file:

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

@Component({
  selector: 'app-pie-chart',
  templateUrl: './pie-chart.component.html',
  styleUrls: ['./pie-chart.component.css']
})

export class PieChartComponent {

  public pieChartOptions: ChartOptions = {
    responsive: true,
  };
  public pieChartLabels: Label[] = [['SciFi'], ['Drama'], 'Comedy'];
  public pieChartData: SingleDataSet = [30, 50, 20];
  public pieChartType: ChartType = 'pie';
  public pieChartLegend = true;
  public pieChartPlugins = [];

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

}

Step 6 – Start the Angular Pie Chart App

In this step, execute the following command on terminal to start angular pie chart app:

ng serve

Recommended Angular Posts