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

AuthorDevendra Dode

Greetings, I'm Devendra Dode, a full-stack developer, entrepreneur, and the proud owner of Tutsmake.com. My passion lies in crafting informative tutorials and offering valuable tips to assist fellow developers on their coding journey. Within my content, I cover a spectrum of technologies, including PHP, Python, JavaScript, jQuery, Laravel, Livewire, CodeIgniter, Node.js, Express.js, Vue.js, Angular.js, React.js, MySQL, MongoDB, REST APIs, Windows, XAMPP, Linux, Ubuntu, Amazon AWS, Composer, SEO, WordPress, SSL, and Bootstrap. Whether you're starting out or looking for advanced examples, I provide step-by-step guides and practical demonstrations to make your learning experience seamless. Let's explore the diverse realms of coding together.

Leave a Reply

Your email address will not be published. Required fields are marked *