Angular 17 Pie Chart ng2-charts Example

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.

Recommended Angular Tutorials