Angular 12 Doughnut Chart with ng2-charts Example

Angular 12/11/10/9 doughnut chart using charts js example. In this tutorial, i am going to show you how to build doughnut chart using ng2-charts js library in angular 9/10/11/12 app.

Doughnut charts show each cell’s data as a slice of a doughnut. The chart may contain one or more doughnuts, arranged one inside the other. Doughnut charts let you show the relationship of parts of several sets of data to the whole. Each doughnut shows a series of data.

Doughnut Chart using ng2-charts in Angular 12

  • Step 1 – Create New Angular App
  • Step 2 – Install Charts JS Library
  • Step 3 – Import-Module in App.Module.ts File
  • Step 4 – Add Code on View File
  • Step 5 – Add Code On app.Component ts File
  • Step 6 – Start the Angular Doughnut Chart App

Step 1 – Create New Angular App

Execute the following command on terminal to install angular app:

ng new my-new-app

Step 2 – Install Charts JS Library

Execute the following commands on terminal to install NPM package called ng2-charts chart.js –save for implement doughnut chart in angular:

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-Module in App.Module.ts File

Import modules; so go to src/app directory and open app.module.ts file. And then add the following lines of into app.module.ts file:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
  
import { AppComponent } from './app.component';
import { ChartsModule } from 'ng2-charts';
  
@NgModule({
  imports:      [ BrowserModule, FormsModule, ChartsModule ],
  declarations: [ AppComponent ],
  bootstrap:    [ AppComponent ]
})
export class AppModule { }

Step 4 – Add Code on View File

Build doughnut chart in angular 12 app. So, visit src/app/ and app.component.htmland update the following code into it:

<h1>Angular 12 doughnut chart example - laratutorials.com</h1>
   
<div style="display: block;">
  <canvas baseChart 
    [data]="doughnutChartData"
    [labels]="doughnutChartLabels"
    [chartType]="doughnutChartType">
  </canvas>
</div>

Step 5 – Add Code On app.Component ts File

Go to src/app directory and open app.component.ts. Then add the following code into component.ts file:

import { Component, OnInit } from '@angular/core';
import { ChartType } from 'chart.js';
import { MultiDataSet, Label } from 'ng2-charts';
  
@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
   
  public doughnutChartLabels: Label[] = ['PHP', '.Net', 'Java'];
  
  public doughnutChartData: MultiDataSet = [
    [250, 150, 100],
    [160, 150, 130],
    [250, 130, 70],
  ];
  
  public doughnutChartType: ChartType = 'doughnut';
  
  constructor() { }
    
  ngOnInit() {
  }
}

Step 6 – Start the Angular Doughnut Chart App

Execute the following command on terminal to start angular doughnut chart app:

ng serve

Recommended Angular Tutorials

Leave a Comment