Top 10 Most Popular Charts In Angular With .NET Core API

This article explains how to create charts in an Angular applications, e.g., line chart, area chart, bar chart, pie chart, doughnut chart, polar area chart, scatter chart, bubble char, gauge chart, radar chart, mixed charts and other types of charts with .NET Core API and using Visual Studio 2017 IDE, ng2-chart and ng2-google-chart as npm packages.

This article is my fourth article on Angular; following is the link to my previous articles

• Creating Angular 5 App with Visual Studio 2017 - An Easy Way
• Exploring Angular Fundamental with Visual Studio 2017
• How To Always Use Angular's Latest Version Of Visual Studio 2017
  

Always Use Angular Latest Version with Visual Studio 2017

There are more than a dozen charts available which can be created very quickly in Angular. However, I am going to explain only those charts which are very popular and more commonly used in day to day life. Following is the list of charts which I am going to cover in this article.

1. Line Chart
2. Area Chart
3. Bar Chart
4. Pie Chart
5. Doughnut Chart
6. Polar Area Chart
7. Scatter Chart
8. Bubble Chart
9. Gauge Chart
10. Radar Chart

Step 1 Create a new Angular app using the inbuilt template of Visual Studio 2017.

Open Visual Studio 2017 >> File >> New >> Project…

Navigate to installed template >> Installed >> Visual C# >> Web >> ASP.NET Core Web Application >> OK >> Select Angular Template >>OK

If you are creating Angular App with Visual Studio 2017 for the first time, then please have a look at the below article which will provide you a more descriptive and pictorial guide to creating your first Angular App with VS 2017.

• Exploring Angular Fundamental with Visual Studio 2017

I have created it using the default template as described in the preceding link so it will look like,

Step 2 - Update Angular Version

Right now, I am using the Angular version “5.2.0-rc.0”. If you are not aware of how to upgrade your project to use the latest version of Angular, then you can go to the below link

Always Use Angular Latest Version with Visual Studio 2017.

Following is the complete code for “package.json” file

Step 3 Install the latest versions of “ng2-charts” and “chart.js”.

Alternatively, you can add those packages name manually in “package.json” file, i.e., add following lines in "devDependencies" section.

• "ng2-charts": "^1.6.0",
• "chart.js": "^2.7.1",

Now start creating different types of charts one by one.

Line Chart

“A line chart or line graph is a type of chart which displays information as a series of data points called 'markers' connected by straight line segments. It is a basic type of chart common in many fields.” -- Source Wikipedia

Area Chart

“An area chart or area graph displays graphically quantitative data. It is based on the line chart. The area between axis and line are commonly emphasized with colors, textures, and hatchings. Commonly one compares with an area chart two or more quantities.” -- Source Wikipedia.

As per the definition mentioned above, we can say that line chart and area chart is very similar, and area chart is based on an online chart emphasized with colors, textures, and hatchings. So I will be creating both types of chart on the same component.

Step 1 - Add a new component for Line Chart using the Angular Item templates option available in Visual Studio 2017.

Right click on “component” folder >> Add >> New Item…

or you can use the keyboard shortcut “Ctrl + Shift + A”.

Check if “Angular Item Templates” is already installed or not. If not, then please install it and re-open this window after installation. Navigate to Installed >> Visual C# >> ASP.NET Core >> Web >> Angular >> Select Angular Component. Provide the component name and click on Add button.

Uncheck the options which are not required, as you can see in the following screenshot that I have unchecked the options for test file name and styles file name. So, test file and styles file will not be created.

Step 2 - Adding .NET Core Web API Controller

As we are doing this with .NET Core, rather than getting sample data from JSON, I will be fetching data from API Service.

Go to API Controller Folder right click on it >> Add >> Controller… >> select “API Controller Empty” >> Provide controller name as “LineChartController” >> Click on Add.

Step 3 - Write a method in .NET Core API Controller to get sample data for a line chart.

If you open the default application, you will notice that it is showing a table for a weather forecast, so let’s use similar type of data for our line and area chart as well. Following is the complete code for “LineChartController.cs”.

Following is the sample JSON data returned from GetWeatherForecast() API method.

Step 4 - Make Changes in line-chart.component.ts

Now go to “line-chart.component.ts” and add following lines

And inside the constructor call the API Service. Following is the complete code of “line-chart.component.ts” file.

line-chart.component.html

Step 5 - Make changes in app.shared.module.ts file

Go to the file the file “app.shared.module.ts” and do the following highlighted changes.

Write code for routing and navigation then re-run the application.

Following is the screenshot of the running application.

As you can see that I have created an area chart (line chart with colors). In case of “ng2-charts”, it is not mandatory to provide custom color. It creates line chart by default filled with color.

Using Custom Color with line chart

Go to the file “line-chart.component.ts” and add following code inside LineChartComponent class.

If you do not provide a value for “backgroundColor”, then it will take gray as the default color.

Comment all “backgroundColor” values for each element of “chartColors”. after that it will look like the following screenshot.

Remove the color from area chat and make it like line chart.

Add following line to each element of “chartColors” to remove background color.

fill: false,

Bar Chart

“A bar chart or bar graph is a chart or graph that presents categorical data with rectangular bars with heights or lengths proportional to the values that they represent. The bars can be plotted vertically or horizontally. A vertical bar chart is sometimes called a line graph.” -- Source Wikipedia.

We have seen multiple examples of Line Chart and Area Chart in the same way we can create bar chart as well. I am not going to add a new component for bar chart we can use the same data line chart to create a bar chart.

Go to line chart HTML file “\line-chart.component.html” and remove following line from <canvas> tag.

[colors]="chartColors"

Following is the complete HTML code

In “\line-chart.component.ts” replace

public chartType: string = 'line';

With

public chartType: string = 'bar';

You can see that it is creating bar above the line and below the line as well. If we remove the negative values, then it will create bar only above the line. Let’s change the data from Web API Controller.

Pie Chart

“A pie chart (or a circle chart) is a circular statistical graphic which is divided into slices to illustrate numerical proportion. In a pie chart, the arc length of each slice (and consequently its central angle and area), is proportional to the quantity it represents. While it is named for its resemblance to a pie which has been sliced, there are variations on the way it can be presented.” -- Source Wikipedia.

Step 1 - Add an API Controller “PieChartController”.

Sample JSON returned from “~/api/PieChart/GetPopulationData”

Step 2 - Add Angular Component “PieChartComponent”.

pie-chart.component.ts

pie-chart.component.html

Step 3 - Changes for Routing and Navigation

Make required changes in “app.shared.module.ts” file for routing.

Add code in “navmenu.component.html” for navigation.

Doughnut Chart

“A doughnut chart (also spelled donut) is a variant of the pie chart, with a blank center allowing for additional information about the data as a whole to be included. Doughnut charts are similar to pie charts in that their aim is to illustrate proportions. This type of circular graph can support multiple statistics at once and it provides a better data intensity ratio to standard pie charts.” -- Source Wikipedia.

In the “pie-chart.component.ts” add following code

In the file “pie-chart.component.html” below line

Apart from this no other change is required. It will automatically render a doughnut chart. Following is the screenshot for the same.

Polar Area Chart

“Polar area charts are similar to pie charts, but each segment has the same angle - the radius of the segment differs depending on the value. This type of chart is often used when we want to show a comparison data similar to a pie chart, but also show a scale of values for context.” -- Source http://www.chartjs.org

Use the same code of “pie-chart.component.ts” and write following code