How to add pie chart in Angular 6 and Asp Net Core application using chart.js

In this tutorial, we are going to learn how to add static chart in Angular 6 and Asp Net Core project using chart.js. Displaying data in chart is very common in complex or business application. Because it makes your application user friendly. So, It’s very easy to implement chart in Angular 6 and Asp Net Core Application. So, after reading this tutorial, you will understand how to add pie chart in Angular 6 application.

Previous Tutorials of Angular 6 and Asp Net Core Series

• How to setup a project using Angular CLI in VS Code?
• How to Setup a project with Angular 6 and ASP.NET Core 2.1 ?
• How to create CRUD Operations using Angular 6 and ASP.NET Core?
• How to implement Search functionality in Angular 6 & ASP.NET Core?
• How to implement server-side filtration in angular 6 & asp.net core ?
• How to sort record using angular 6 and asp.net core?
• Search, Sort, and Pagination in angular 6 and asp.net core.
• How to create web api in angular 6 and asp.net core?
• How to implement Angular 6 authentication and authorization using Asp Net Core?
• How to upload file using Angular 6 and Asp Net web API?

Note: – we are not going to create a new project in this tutorial. If you don’t know how to create a new project using Angular 6 and Asp Net Core, then click here.

Learn how to add static pie chart in Angular 6 and Asp Net Core Application?

Let’s start to understand how to add chart in Angular 6 application in steps.

Step # 1 : Add Some Node Packages.

First-of-all, we need to install some node packages in our Angular 6 application. So, to do it, go to Visual Studio Code terminal => then write these below commands.

=> npm install chart.js angular2-chartjs --save

This above command will create bunch of components that we can use in our project.

Step # 2 : Import the module into the App.Module.ts

Now in this step we need to import module into the app.module.ts file. So, go to project folder structure and open the app.module.ts file and then add the below line of code into the app.module.ts.

import {ChartModule} from 'angular2-chartjs';

Now, add the “ChartModule” into the imports block.

Step # 3 : Create A New Component

Now in this step we will create a new component to show pie chart in Angular 6 application. So, to do it, go to Visual Studio terminal and add the below Angular CLI command to create a new component. Note: – make sure you are creating new component in correct location.

=> ng g component pie-chart

After running this command, you will see a new folder with the name of pie-chart in your project folder directory with some files.

Note: – Don’t forget to add route of this component.

Step # 4 : Add Front-end code.

Now in this step we will add front-end code for pie chart in our angular 6 project. So, go to pie-chart folder and open “pie-chart.component.html” file and then add the code into this file as you see in the below line.

<chart type="pie" [data]="data"></chart>

Step # 5 : Add component code.

Now go to pie-chart.component.ts file and add the code as you see in the below file.

Step # 6 : Run your project

Now run your project and go to browser and write the url like this “http://localhost:5000/PieChart” and then you will see a beautiful pie chart as you see in the below screenshot.