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