Implementing Doughnut Chart Using ng2-Charts Tutorial Angular 11/12

Doughnut Chart Using Charts js Example Angular 9/10/11/12 Example. We will learn step by step how to implement Doughnut Charts using the ng2-charts js library in Angular 9/10/11/12 app.

In addition, we will get comprehensive knowledge on creating doughnut charts using ng2-chart js Angular 11/12 version.

Implementing Doughnut Chart Using ng2-Charts Tutorial Angular 11/12

We simply need to follow the given steps for implementing the Doughnut Chart using ng2-charts in the Angular 11/12 app:

Step 1 is to Create the New Angular App

Step 2 is to Install the Charts js Library

Step 3 is to Import-Module in App.Module.ts File

Step 4 is to Add Code on View File

Step 5 is to Add Code On app.Component ts File

Step 6 is to Start the Angular Doughnut Chart App

Now, Let’s Learn in Detail

Step 1- Creating the New Angular App

First of all, open your terminal and execute the given command on it to install an angular app:

ng new doughnut-chart-app

Step 2 : Installing the Charts js Library 

Next, just install the NPM package called ng2-charts chart.js -save for implementing the doughnut chart in the Angular app. Further, we can install the packages by executing the below-mentioned commands on the terminal:

npm install --save bootstrap

npm install ng2-charts chart.js --save

Afterward, we open the angular j.son file and update the given code into it:

"styles": [
      "node_modules/bootstrap/dist/css/bootstrap.min.css",
      "src/styles.css"
]

Step 3: Import-Module in App.Module.ts File

Next, we visit the src/app directory and open the app.module.ts file. Thereafter, we also add the given lines into the 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: Adding the Code on View File

In the next step, we create the doughnut chart in the Angular app. Then, we visit the src/app/ and the app.component.html after which, we update the following code into it:

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

Step 5: Adding Code On app.Component ts File

Now, follow this step in which we visit the src/app directory and open app.component.ts.  After this, we add the following code into the 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: Starting the Doughnut Chart Angular App

Lastly, we reach the final step of implementation where we execute the following command on the terminal to start the doughnut chart angular app:

ng serve

Conclusion

Finally, we reach the end of this tutorial where we have learned to implement the doughnut chart in the Angular 12 app. We have tried to explain things in quite a simple way. Hope you have understood it well. 

Thanks