Angular 16 Pie Chart Using Chart JS Example

Angular 16 pie chart example; Through this tutorial, i am going to show you how to implement pie chart using charts js library in Angular 16 apps.

Angular 13 Pie Chart Using Chart JS Example

Follow the below steps to implement pie chart using chart js library in Angular 16 apps; as follows:

  • Step 1 – Create New Angular App
  • Step 2 – Install Charts JS Library
  • Step 3 – Import Modules in Module.ts File
  • Step 4 – Create PIE Chart 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

Run the following command on command prompt to install angular app:

ng new my-new-app

Step 2 – Install Charts JS Library

Run the following command on command prompt to install charts js and bootstrap packages:

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 – Import Modules in Module.ts File

Go to 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 – Create PIE Chart on View File

Go to src/app/ and pie-chart.component.html and add 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

Go to 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

Run the following command on command promt to start angular pie chart app:

ng serve

Recommended Angular Tutorials

Leave a Comment