To create pie charts in Angular; Simply install ng2-charts with Chart JS and use its functions to create and manipulate ng2-chart pie chart colors, labels, height, width, size, options, percentages, etc in Angular 17 applications.
Angular Pie Chart using ng2-charts Example
Steps to create a pie chart in angular 17 applications using ng2-charts:
Step 1 – Create new Angular project
If you do not have Angular project in your system, then you can run the ng new my-new-app command on CMD and terminal window, it will install and create a new Angular project using Angular CLI:
ng new myApp --no-standalone
Step 2 – Install Chart.js with ng2-charts
To run the npm install ng2-charts chart.js --save
command on cmd to install Chart.js with ng2-charts:
npm install --save bootstrap npm install ng2-charts chart.js --save
Open the angular.json
file in the project root and add the Chart.js styles to the “styles” array:
"styles": [ "node_modules/bootstrap/dist/css/bootstrap.min.css", "node_modules/chart.js/dist/chart.min.css", "src/styles.css" ]
Step 3 – Create Pie Chart component
Just run ng generate component pie-chart
command on cmd to generate new pie chart components:
ng generate component pie-chart
Step 4 – Define the Chart in pie chart component
Open the pie-chart.component.ts
file located inside the src/app/pie-chart/
folder. Replace the content with the following code:
import { Component, OnInit } from '@angular/core'; @Component({ selector: 'app-pie-chart', templateUrl: './pie-chart.component.html', styleUrls: ['./pie-chart.component.css'] }) export class PieChartComponent implements OnInit { public pieChartLabels: string[] = ['Label 1', 'Label 2', 'Label 3']; public pieChartData: number[] = [30, 50, 20]; public pieChartType = 'pie'; constructor() { } ngOnInit() { } }
Step 5 – Create the pie chart template
Simply navigate src/app/pie-chart/
folder and open the pie-chart.component.html
file, then create pie chart like following into it:
<div style="display: block;"> <canvas baseChart [data]="pieChartData" [labels]="pieChartLabels" [chartType]="pieChartType"> </canvas> </div>
Step 6 – Import Module in Typescript
To import modules in typescript file, simply open app.module.ts
file from src/app/
folder and import the necessary modules into it like following:
import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { ChartsModule } from 'ng2-charts'; import { AppComponent } from './app.component'; import { PieChartComponent } from './pie-chart/pie-chart.component'; @NgModule({ declarations: [ AppComponent, PieChartComponent ], imports: [ BrowserModule, ChartsModule ], providers: [], bootstrap: [AppComponent] }) export class AppModule { }
Step 7 – Import pie chart template in the app template
Open the app.component.html
from src/app/
folder, then import pie chart template into it like following:
<div style="text-align: center;"> <h1>Angular Pie Chart using ng2 chart js Example</h1> <app-pie-chart></app-pie-chart> </div>
Step 8 – Run the Angular app
Finally, execute the following command on cmd to start the angular applications server:
ng serve
Visit http://localhost:4200
in your web browser to see the dynamic pie chart example.
Conclusion
That’s it! You’ve successfully created a dynamic pie chart in Angular 17 using ng-2 Chart.js.