Dynamic Pie Chart in Angular 16

Angular 16 dynamic pie chart example; In this tutorial, you will learn how to make dynamic pie chart in angular 16 applications using ng2-charts and charts js library.

How to Make a Dynamic Pie Chart in Angular 16

Steps to make a dynamic pie chart in angular 16 applications using ng2-charts & charts js:

• Step 1 – Set up a new Angular 16 project
• Step 2 – Install Chart.js and ng2-charts
• Step 3 – Create a new Pie Chart component
• Step 4 – Implement the pie chart component
• Step 5 – Create the pie chart template
• Step 6 – Add Chart.js to the app module
• Step 7 – Use the pie chart component in the app component
• Step 8 – Run the Angular app
• Step 9 – Update the pie chart dynamically (Optional)

Step 1 – Set up a new Angular 16 project

First of all, open your cmd or command prompt and execute the following command on it to install and create a new Angular project using Angular CLI:

ng new my-new-app

Step 2 – Install Chart.js and ng2-charts

Next execute the following command on cmd to install Chart.js, ng2-charts, and bootstrap in angular application using npm:

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 a new Pie Chart component

Next, execute the following command on cmd to generate a new component called “pie-chart”:

ng generate component pie-chart

Step 4 – Implement the 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

Open the pie-chart.component.html file located inside the src/app/pie-chart/ folder and add the following code:

<div style="display: block;">
  <canvas baseChart
          [data]="pieChartData"
          [labels]="pieChartLabels"
          [chartType]="pieChartType">
  </canvas>
</div>

Step 6 – Add Chart.js to the app module

Open the app.module.ts file located inside the src/app/ folder and import the necessary modules:

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 { }

Next the app.component.ts file located inside the src/app/ folder and add your code, if you have any:

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'Dynamic Pie Chart Example';

  // Optionally, you can define other properties or methods here.
}

Step 7 – Use the pie chart component in the app component

Open the app.component.html file located inside the src/app/ folder and add the following code:

<div style="text-align: center;">
  <h1>Angular 16 Dynamic Pie Chart using ng2 chart jsExample</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.

Step 9 – Update the pie chart dynamically (Optional)

If you want to update the pie chart dynamically, you can change the pieChartData array in the PieChartComponent and then use Angular change detection to re-render the chart.

For example, you can add a button in the pie-chart.component.html file:

<button (click)="updateChart()">Update Chart</button>

Then, in the pie-chart.component.ts file, add the updateChart() method:

updateChart() {
  // Update pieChartData with new data
  this.pieChartData = [40, 20, 40];
}

Now, when you click the “Update Chart” button, the pie chart will be updated with the new data.

Conclusion

That’s it! You’ve successfully created a dynamic pie chart in Angular 16 using ng-2 Chart.js.

Recommended Angular Tutorials