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

{
  "name": "AngularCharts",
  "private": true,
  "version": "0.0.0",
  "scripts": {
    "test": "karma start ClientApp/test/karma.conf.js"
  },
  "devDependencies": {
    "@angular/animations": "^5.2.0-rc.0",
    "@angular/common": "^5.2.0-rc.0",
    "@angular/compiler": "^5.2.0-rc.0",
    "@angular/compiler-cli": "^5.2.0-rc.0",
    "@angular/core": "^5.2.0-rc.0",
    "@angular/forms": "^5.2.0-rc.0",
    "@angular/http": "^5.2.0-rc.0",
    "@angular/platform-browser": "^5.2.0-rc.0",
    "@angular/platform-browser-dynamic": "^5.2.0-rc.0",
    "@angular/platform-server": "^5.2.0-rc.0",
    "@angular/router": "^5.2.0-rc.0",
    "@ngtools/webpack": "^1.9.3",
    "@types/chai": "^4.1.0",
    "@types/jasmine": "^2.8.3",
    "@types/webpack-env": "^1.13.3",
    "angular2-router-loader": "^0.3.5",
    "angular2-template-loader": "^0.6.2",
    "aspnet-prerendering": "^3.0.1",
    "aspnet-webpack": "^2.0.1",
    "awesome-typescript-loader": "^3.4.1",
    "bootstrap": "^3.3.7",
    "chai": "^4.1.2",
    "css": "^2.2.1",
    "css-loader": "^0.28.8",
    "es6-shim": "^0.35.3",
    "event-source-polyfill": "^0.0.12",
    "expose-loader": "^0.7.4",
    "extract-text-webpack-plugin": "^3.0.2",
    "file-loader": "^1.1.6",
    "html-loader": "^0.5.4",
    "isomorphic-fetch": "^2.2.1",
    "jasmine-core": "^2.8.0",
    "jquery": "^3.2.1",
    "json-loader": "^0.5.7",
    "karma": "^2.0.0",
    "karma-chai": "^0.1.0",
    "karma-chrome-launcher": "^2.2.0",
    "karma-cli": "^1.0.1",
    "karma-jasmine": "^1.1.1",
    "karma-webpack": "^2.0.9",
    "preboot": "^6.0.0-beta.1",
    "raw-loader": "^0.5.1",
    "reflect-metadata": "^0.1.10",
    "rxjs": "^5.5.6",
    "style-loader": "^0.19.1",
    "to-string-loader": "^1.1.5",
    "typescript": "^2.6.2",
    "url-loader": "^0.6.2",
    "webpack": "^3.10.0",
    "webpack-hot-middleware": "^2.21.0",
    "webpack-merge": "^4.1.1",
    "zone.js": "^0.8.19",
    "ng2-charts": "^1.6.0",
    "chart.js": "^2.7.1"
  },
  "dependencies": {
    "ng2-google-charts": "^3.3.0"
  }
}

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”.

using System;
using System.Collections.Generic;
using Microsoft.AspNetCore.Mvc;

namespace AngularChartsWithCoreAPI.Controllers
{
    [Produces("application/json")]
    [Route("api/LineChart")]
    public class LineChartController : Controller
    {
        [HttpGet("[action]")]
        public WeatherForecast GetWeatherForecast()
        {
            var weatherList = new List<Weather>();
            weatherList.Add(new Weather { Label = "New Delhi", Data = new int[] { 6, 19, 6, 21, 7, 15 } });
            weatherList.Add(new Weather { Label = "New York", Data = new int[] { -8, -6, -1, 2, -7, 6 } });
            weatherList.Add(new Weather { Label = "Moscow", Data = new int[] { -4, 3, -5, -1, -6, -3 } });
            weatherList.Add(new Weather { Label = "London", Data = new int[] { 6, 2, 4, 6, 7, 7 } });

            List<string> lineChartLabelsList = new List<string>();

            for (int i = 0; i < 3; i++)
            {
                lineChartLabelsList.AddRange(new string[] { $"{(DayOfWeek)i} High", $"{(DayOfWeek)i} Low" });
            }
            return new WeatherForecast { WeatherList = weatherList, ChartLabels = lineChartLabelsList.ToArray() };
        }

        public class Weather
        {
            public int[] Data { get; set; }
            public string Label { get; set; }
        }

        public class WeatherForecast
        {
            public List<Weather> WeatherList { get; set; }
            public string[] ChartLabels { get; set; }
        }
    }
}

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

{
    "weatherList": [
        {
            "data": [6, 19, 6, 21, 7, 15],
            "label": "New Delhi"
        },
        {
            "data": [-8, -6, -1, 2, -7, 6],
            "label": "New York"
        },
        {
            "data": [-4, 3, -5, -1, -6, -3],
            "label": "Moscow"
        },
        {
            "data": [6, 2, 4, 6, 7, 7],
            "label": "London"
        }
    ],
    "chartLabels": [
        "Sunday High",
        "Sunday Low",
        "Monday High",
        "Monday Low",
        "Tuesday High",
        "Tuesday Low"
    ]
}

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

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

interface Weather {
    data: Array<number>;
    label: string;
}

interface WeatherForecast {
    weatherList: Weather[];
    chartLabels: string[];
}

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

import { Component, Inject } from '@angular/core';
import { Http } from '@angular/http';

@Component({
    selector: 'app-line-chart',
    templateUrl: './line-chart.component.html',
})


export class LineChartComponent {
    public weatherForecast: WeatherForecast;
    public chartLegend: boolean = true;
    public chartType: string = 'line';


    public chartOptions: any = {
        responsive: true,
        legend: {
            position: 'bottom'
        }
    };

    constructor(http: Http, @Inject('BASE_URL') baseUrl: string) {
        http.get(baseUrl + 'api/LineChart/GetWeatherForecast').subscribe(result => {
            this.weatherForecast = result.json() as WeatherForecast;
        }, error => console.error(error));
    }
}


interface Weather {
    data: Array<number>;
    label: string;
}

interface WeatherForecast {
    weatherList: Weather[];
    chartLabels: string[];
}

line-chart.component.html

<h1>Highest & Lowest Temprature for Next 3 Days</h1>

<div class="row" *ngIf="weatherForecast">
    <div style="display: block">
        <canvas baseChart
                [datasets]="weatherForecast.weatherList"
                [labels]="weatherForecast.chartLabels"
                [options]="chartOptions"
                [legend]="chartLegend"
                [chartType]="chartType"></canvas>
    </div>
</div>

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.

public chartColors: Array<any> = [
        {

            backgroundColor: 'rgba(255, 0, 0, 0.2)',
            borderColor: 'rgba(255,153,51,1)',
            pointBackgroundColor: 'rgba(0,128,0,1)',
            pointBorderColor: '#fff',
            pointHoverBackgroundColor: '#fff',
            pointHoverBorderColor: 'rgba(148,159,177,0.8)',
            pointRadius: 8,
        },
        {

            backgroundColor: 'rgba(0, 0, 255, 0.4)',
            borderColor: 'rgba(77,83,96,1)',
            pointBackgroundColor: 'rgba(77,83,96,1)',
            pointBorderColor: '#fff',
            pointHoverBackgroundColor: '#fff',
            pointHoverBorderColor: 'rgba(77,83,96,1)',
            lineTension: 0,
            pointRadius: 10,
            pointStyle: 'rectRounded'
        },
        {
            backgroundColor: 'green',
            borderColor: 'rgba(0,128,0,1)',
            pointBackgroundColor: 'rgba(148,159,177,1)',
            pointBorderColor: '#fff',
            pointHoverBackgroundColor: '#fff',
            pointHoverBorderColor: 'rgba(148,159,177,0.8)',
            pointStyle: 'rect',
            pointRadius: 6,

        },

        {

            backgroundColor: 'rgba(255, 255, 0, 0.2)',
            borderColor: 'rgba(0,0,255,1)',
            pointBackgroundColor: 'rgba(0,0,255,1)',
            pointBorderColor: '#fff',
            pointHoverBackgroundColor: '#fff',
            pointHoverBorderColor: 'rgba(148,159,177,0.8)',
            pointStyle: 'triangle',
            pointRadius: 10,
        }
    ];

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

<div class="row" *ngIf="weatherForecast">
    <div style="display: block">
        <canvas baseChart
                [datasets]="weatherForecast.weatherList"
                [labels]="weatherForecast.chartLabels"
                [options]="chartOptions"
                [legend]="chartLegend"
                [chartType]="chartType"></canvas>
    </div>
</div>

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. 

public WeatherForecast GetWeatherForecast()
        {
            var weatherList = new List<Weather>();
            weatherList.Add(new Weather { Label = "New Delhi", Data = new int[] { 6, 19, 6, 21, 7, 15 } });
            //weatherList.Add(new Weather { Label = "New York", Data = new int[] { -8, -6, -1, 2, -7, 6 } });
            //weatherList.Add(new Weather { Label = "Moscow", Data = new int[] { -4, 3, -5, -1, -6, -3 } });
            weatherList.Add(new Weather { Label = "London", Data = new int[] { 6, 2, 4, 6, 7, 7 } });

            List<string> lineChartLabelsList = new List<string>();

            for (int i = 0; i < 3; i++)
            {
                lineChartLabelsList.AddRange(new string[] { $"{(DayOfWeek)i} High", $"{(DayOfWeek)i} Low" });
            }

            return new WeatherForecast { WeatherList = weatherList, ChartLabels = lineChartLabelsList.ToArray() };

        }

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”.

using Microsoft.AspNetCore.Mvc;
namespace AngularCharts.Controllers
{
    [Produces("application/json")]
    [Route("api/PieChart")]
    public class PieChartController : Controller
    {
        [HttpGet("[action]")]
        public WorldPopulation GetPopulationData()
        {
            WorldPopulation population = new WorldPopulation {
                Countries = new string[] { "China", "India", "USA", "Indonesia", "Brazil", "Other" },
                Population = new long[] { 1_376_745_728, 1_296_834_048, 331_026_400, 262_936_096, 218_622_304, 3_997_059_073 } };
            return population;
        }
    }

    public class WorldPopulation
    {
        public string[] Countries { get; set; }
        public long[] Population { get; set; }
    }
}

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

{
    "countries": [
        "China",
        "India",
        "USA",
        "Indonesia",
        "Brazil",
        "Other"
    ],
        "population": [
            1376745728,
            1296834048,
            331026400,
            262936096,
            218622304,
            3997059073
        ]
}

Step 2 - Add Angular Component “PieChartComponent”.

pie-chart.component.ts 

import { Component, Inject } from '@angular/core';
import { Http } from '@angular/http';

@Component({
    selector: 'app-pie-chart',
    templateUrl: './pie-chart.component.html',
    styleUrls: ['./pie-chart.component.css']
})


export class PieChartComponent {

    public worldPopulation: WorldPopulation;
    public chartType: string = 'pie';
    public chartName: string = 'Pie Chart';

    constructor(http: Http, @Inject('BASE_URL') baseUrl: string) {
        http.get(baseUrl + 'api/PieChart/GetPopulationData').subscribe(result => {
            this.worldPopulation = result.json() as WorldPopulation;
        }, error => console.error(error));
    }


   public showPieChart() {
        this.chartType = 'pie';
 this.chartName = 'Pie Chart';
    }

}

interface WorldPopulation {
    countries: Array<string>;
    population: Array<number>;
}

pie-chart.component.html

<h1>World Population Country Wise : {{chartName}}</h1>
<div class="row" *ngIf="worldPopulation">
    <div style="display: block">
        <canvas baseChart
                [data]="worldPopulation.population"
                [labels]="worldPopulation.countries"
                [chartType]="chartType"></canvas>
    </div>
</div>

<button (click)="showPieChart()" style="font-size:24px">Pie Chart</button>

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

public showDoughnutChart() {
        this.chartType = 'doughnut';
        this.chartName = 'Doughnut Chart';
    }

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

<button (click)="showDoughnutChart()" style="font-size:24px">Doughnut Chart</button>

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

public showPolarAreaChart() {
        this.chartType = 'polarArea';
        this.chartName = 'Polar Area Chart';
    }

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

<button (click)="showPolarAreaChart()" style="font-size:24px">Polar Area Chart</button>

Apart from this, no other change is required. It will automatically render a polar area chart. Following is the screenshot of the same.

Scatter Chart

“A scatter plot (also called a scatterplot, scatter graph, scatter chart, scattergram, or scatter diagram) is a type of plot or mathematical diagram using Cartesian coordinates to display values for typically two variables for a set of data. If the points are color-coded, one additional variable can be displayed.” -- Source Wikipedia.

Step 1 Add a .NET Core API Controller

Add a .NET Core API Controller “ScatterChartController” for getting scatter chart data.

ScatterChartController.cs

using System;
using System.Collections.Generic;
using Microsoft.AspNetCore.Mvc;

namespace AngularCharts.Controllers
{
    [Produces("application/json")]
    [Route("api/ScatterChart")]
    public class ScatterChartController : Controller
    {
        [HttpGet("[action]")]
        public Scatter[] GetScatterChartData()
        {
            List<Scatter> scatterList = new List<Scatter>();
            var rng = new Random();
            for (int i = 1; i <= 5; i++)
            {
                List<ScatterData> scatterDataList = new List<ScatterData>();
                for (int j = 1; j <= 5; j++)
                {
                    scatterDataList.Add(new ScatterData { X = rng.Next(-20, 55), Y = rng.Next(-20, 55) });
                }
                scatterList.Add(new Scatter { Data = scatterDataList, Label = $"DataSet {i:00}" });
            }
            return scatterList.ToArray();
        }
    }

    public class Scatter
    {
        public List<ScatterData> Data { get; set; }
        public string Label { get; set; }
    }
    public class ScatterData
    {
        public int X { get; set; }
        public int Y { get; set; }
    }
}

Sample JSON returned from “~/api/ScatterChart/ GetScatterChartData”

[
    {
        "data": [
            {
                "x": 13,
                "y": -15
            },
            {
                "x": -3,
                "y": 28
            },
            {
                "x": 50,
                "y": 39
            },
            {
                "x": -19,
                "y": -12
            },
            {
                "x": 27,
                "y": -20
            }
        ],
        "label": "DataSet 01"
    },
    {
        "data": [
            {
                "x": 18,
                "y": 45
            },
            {
                "x": 54,
                "y": -6
            },
            {
                "x": 43,
                "y": 25
            },
            {
                "x": 10,
                "y": -16
            },
            {
                "x": 10,
                "y": 25
            }
        ],
        "label": "DataSet 02"
    },
    {
        "data": [
            {
                "x": 20,
                "y": 1
            },
            {
                "x": 2,
                "y": 49
            },
            {
                "x": 42,
                "y": -13
            },
            {
                "x": -18,
                "y": 16
            },
            {
                "x": -5,
                "y": 44
            }
        ],
        "label": "DataSet 03"
    },
    {
        "data": [
            {
                "x": -13,
                "y": -9
            },
            {
                "x": -9,
                "y": 15
            },
            {
                "x": -8,
                "y": 29
            },
            {
                "x": 50,
                "y": 2
            },
            {
                "x": 9,
                "y": 45
            }
        ],
        "label": "DataSet 04"
    },
    {
        "data": [
            {
                "x": -14,
                "y": -16
            },
            {
                "x": 2,
                "y": 2
            },
            {
                "x": -7,
                "y": 32
            },
            {
                "x": 38,
                "y": -14
            },
            {
                "x": -7,
                "y": -20
            }
        ],
        "label": "DataSet 05"
    }
]

Step 2 Add an angular component

Add an angular component “ScatterChartComponent” for creating scatter chart.

scatter-chart.component.ts

import { Component, Inject } from '@angular/core';
import { Http } from '@angular/http';

@Component({
    selector: 'app-scatter-chart',
    templateUrl: './scatter-chart.component.html',
    styleUrls: ['./scatter-chart.component.css']
})

export class ScatterChartComponent {

    public scatterData: Scatter[];

    constructor(http: Http, @Inject('BASE_URL') baseUrl: string) {
        http.get(baseUrl + 'api/ScatterChart/GetScatterChartData').subscribe(result => {
            this.scatterData = result.json() as Scatter[];
        }, error => console.error(error));
    }

    public chartLegend: boolean = true;

    public chartColors: Array<any> = [
        {

            backgroundColor: 'rgba(0,128,0,1)',
            borderColor: 'rgba(0,128,0,1)',
            pointBackgroundColor: 'rgba(0,128,0,1)',
            pointBorderColor: '#fff',
            pointHoverBackgroundColor: '#fff',
            pointHoverBorderColor: 'rgba(148,159,177,0.8)',
            pointRadius: 8
        },
        {

            backgroundColor: 'rgba(77,83,96,1)',
            borderColor: 'rgba(77,83,96,1)',
            pointBackgroundColor: 'rgba(77,83,96,1)',
            pointBorderColor: '#fff',
            pointHoverBackgroundColor: '#fff',
            pointHoverBorderColor: 'rgba(77,83,96,1)',
            lineTension: 0,
            pointRadius: 10,
            pointStyle: 'rectRounded'
        },
        {
            backgroundColor: 'rgba(255,99,33,1)',
            borderColor: 'rgba(255,99,33,1)',
            pointBackgroundColor: 'rgba(255,99,33,1)',
            pointBorderColor: '#fff',
            pointHoverBackgroundColor: '#fff',
            pointHoverBorderColor: 'rgba(148,159,177,0.8)',
            pointStyle: 'rect',
            pointRadius: 12,

        },

        {

            backgroundColor: 'rgba(0,0,255,1)',
            borderColor: 'rgba(0,0,255,1)',
            pointBackgroundColor: 'rgba(0,0,255,1)',
            pointBorderColor: 'rgba(0,0,255,1)',
            pointHoverBackgroundColor: '#fff',
            pointHoverBorderColor: 'rgba(148,159,177,0.8)',
            pointStyle: 'triangle',
            pointRadius: 10,
            borderWidth: 2,
        },

        {

            backgroundColor: 'rgba(255,0,0,1)',
            borderColor: 'rgba(255,0,0,1)',
            pointBackgroundColor: 'rgba(255,0,0,1)',
            pointBorderColor: '#fff',
            pointHoverBackgroundColor: '#fff',
            pointHoverBorderColor: 'rgba(148,159,177,0.8)',
            pointStyle: 'rectRot',
            pointRadius: 12,
        }
    ];
    public scatterChartType: string = 'scatter';
    public ScatterchartOptions: any = {
        responsive: true,
        legend: {
            position: 'bottom'
        },

        scales: {
            xAxes: [{
                type: 'linear',
                position: 'bottom'
            }]
        }
    };
}

interface Scatter {
    data: Array<ScatterData>;
    label: string;
}

interface ScatterData {
    x: number;
    y: number;
}

scatter-chart.component.html

<h1>Colorful Scatter Chart</h1>

<div style="display: block" *ngIf="scatterData">
    <canvas baseChart
            [datasets]="scatterData"
            [options]="ScatterchartOptions"
            [legend]="chartLegend"
            [colors]="chartColors"
            [chartType]="scatterChartType"></canvas>
</div>

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.

Bubble Chart

A bubble chart is a variation of a scatter chart in which the data points are replaced with bubbles, and an additional dimension of the data is represented in the size of the bubbles. Just like a scatter chart, a bubble chart does not use a category axis — both horizontal and vertical axes are valued axes. -- Source Wikipedia.

Step 1 Add a .NET Core API Controller

Add a .NET Core API Controller “BubbleChartController” for getting bubble chart data.

BubbleChartController.cs

using System;
using System.Collections.Generic;
using Microsoft.AspNetCore.Mvc;

namespace AngularCharts.Controllers
{
    [Produces("application/json")]
    [Route("api/BubbleChart")]
    public class BubbleChartController : Controller
    {
        [HttpGet("[action]")]
        public Bubble[] GetBubbleChartData()
        {
            List<Bubble> bubbleList = new List<Bubble>();

            var rng = new Random();
            for (int i = 1; i <= 5; i++)
            {
                List<BubbleData> bubbleDataList = new List<BubbleData>();
                for (int j = 1; j <= 5; j++)
                {
                    bubbleDataList.Add(new BubbleData { X = rng.Next(-20, 55), Y = rng.Next(-20, 55), R = rng.Next(2, 20) });
                }
                bubbleList.Add(new Bubble { Data = bubbleDataList, Label = $"DataSet {i:00}" });

            }

            return bubbleList.ToArray();
        }
    }

    public class BubbleData
    {
        public int X { get; set; }
        public int Y { get; set; }
        public int R { get; set; }
    }

    public class Bubble
    {
        public List<BubbleData> Data { get; set; }
        public string Label { get; set; }
    }
}

Sample JSON returned from “~/api/BubbleChart/GetBubbleChartData”

[
    {
        "data": [
            {
                "x": -13,
                "y": 43,
                "r": 2
            },
            {
                "x": -12,
                "y": -6,
                "r": 5
            },
            {
                "x": 6,
                "y": -19,
                "r": 12
            },
            {
                "x": -16,
                "y": -17,
                "r": 14
            },
            {
                "x": 41,
                "y": 10,
                "r": 7
            }
        ],
        "label": "DataSet 01"
    },
    {
        "data": [
            {
                "x": 10,
                "y": -1,
                "r": 19
            },
            {
                "x": -3,
                "y": 52,
                "r": 9
            },
            {
                "x": 48,
                "y": 25,
                "r": 14
            },
            {
                "x": -14,
                "y": 33,
                "r": 17
            },
            {
                "x": -5,
                "y": 0,
                "r": 10
            }
        ],
        "label": "DataSet 02"
    },
    {
        "data": [
            {
                "x": 32,
                "y": 43,
                "r": 14
            },
            {
                "x": 44,
                "y": -3,
                "r": 11
            },
            {
                "x": -19,
                "y": 1,
                "r": 17
            },
            {
                "x": 30,
                "y": 1,
                "r": 17
            },
            {
                "x": 22,
                "y": 6,
                "r": 19
            }
        ],
        "label": "DataSet 03"
    },
    {
        "data": [
            {
                "x": 29,
                "y": 39,
                "r": 16
            },
            {
                "x": 28,
                "y": -20,
                "r": 4
            },
            {
                "x": -11,
                "y": 30,
                "r": 7
            },
            {
                "x": 53,
                "y": -6,
                "r": 6
            },
            {
                "x": 8,
                "y": -19,
                "r": 10
            }
        ],
        "label": "DataSet 04"
    },
    {
        "data": [
            {
                "x": 2,
                "y": -9,
                "r": 15
            },
            {
                "x": -10,
                "y": 7,
                "r": 5
            },
            {
                "x": 53,
                "y": 52,
                "r": 5
            },
            {
                "x": 38,
                "y": 8,
                "r": 19
            },
            {
                "x": -11,
                "y": 21,
                "r": 14
            }
        ],
        "label": "DataSet 05"
    }
]

Step 2 Add an angular component

Add an angular component “BubbleChartComponent” for creating bubble chart.

bubble-chart.component.ts

import { Component, Inject } from '@angular/core';
import { Http } from '@angular/http';

@Component({
    selector: 'app-bubble-chart',
    templateUrl: './bubble-chart.component.html',
    styleUrls: ['./bubble-chart.component.css']
})
/** BubbleChart component*/
export class BubbleChartComponent {

    public bubbleChartData: Bubble[];

    public bublleChartType: string = 'bubble';

    constructor(http: Http, @Inject('BASE_URL') baseUrl: string) {
        http.get(baseUrl + 'api/BubbleChart/GetBubbleChartData').subscribe(result => {
            this.bubbleChartData = result.json() as Bubble[];
        }, error => console.error(error));
    }

    public chartColors: Array<any> = [
        {
            backgroundColor: 'rgba(0,128,0,1)',
        },
        {
            backgroundColor: 'rgba(77,83,96,1)',
        },
        {
            backgroundColor: 'rgba(255,99,33,1)',
        },

        {
            backgroundColor: 'rgba(0,0,255,1)',
        },

        {
            backgroundColor: 'maroon',
        }
    ];

}


interface Bubble {
    data: Array<BubbleData>;
    label: string;
}


interface BubbleData {
    x: number;
    y: number;
    r: number;
}

bubble-chart.component.html

<div style="display: block" *ngIf="bubbleChartData">
    <canvas baseChart
            [datasets]="bubbleChartData"
            [colors]="chartColors"
            [chartType]="bublleChartType"></canvas>
</div>

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.

Gauge Chart

Gauge chart can be created very quickly using ng2-google-charts. So, install package “ng2-google-charts” if it is not installed already.

Alternatively, you can add following code manually in “package.json” file.

"dependencies": {
    "ng2-google-charts": "^3.3.0"
  }

For Gauge chart, I am not going to create a Web API Controller. I am going to use JSON data directly. If you wish you can fetch these data from API service as well.

Step 1 Add an angular component

Add an angular component “GaugeChartComponent” for creating gauge chart.

gauge-chart.component.ts

import { Component } from '@angular/core';

@Component({
    selector: 'app-gauge-chart',
    templateUrl: './gauge-chart.component.html',
    styleUrls: ['./gauge-chart.component.css']
})

export class GaugeChartComponent {

    constructor() {

    }

    guageChartData = {
        chartType: 'Gauge',
        dataTable: [
            ['Label', 'Value'],
            ['CPU', 33],
            ['Memory', 84],
            ['Disk', 55],
            ['Network', 5],
            ['GPU', 3]
        ],
        options: {
            'title': 'Tasks',
            'greenFrom': 0,
            'greenTo': 30,
            'yellowFrom': 30,
            'yellowTo': 80,
            //'yellowColor': '#CCCC00',
            'redFrom': 80, 'redTo': 100,
            'max': 100
        },
    };

    risk = {
        chartType: 'Gauge',
        dataTable: [
            ['Label', 'Value'],
            ['Market Risk', 3.2],
        ],
        options: {
            'title': 'Market Risk',
            'max': 5,
            'greenFrom': 0,
            'greenTo': 3,
            'yellowFrom': 3,
            'yellowTo': 4,
            'redFrom': 4,
            'redTo': 5,
        },
    };

    risk2 = {
        chartType: 'Gauge',
        dataTable: [
            ['Label', 'Value'],
            ['Risk', 1.8],
        ],
        options: {
            'title': 'Risk',
            'max': 5,
            'greenFrom': 0,
            'greenTo': 3,
            'yellowFrom': 3,
            'yellowTo': 4,
            'redFrom': 4,
            'redTo': 5,
            'minorTicks':10,
        },
    };
}

gauge-chart.component.html

<h1> Google Chart: Guage Chart</h1>

<strong>Task Manager</strong>
<google-chart [data]="guageChartData"></google-chart>

<br />
<strong>Risk Meter</strong>
<table>
    <tr>
        <td>
            <google-chart [data]="risk"></google-chart>
        </td>
        <td>
            <google-chart [data]="risk2"></google-chart>
        </td>
    </tr>
</table>

Step 2 Changes for Routing and Navigation

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

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

Radar Chart

“A radar chart is a graphical method of displaying multivariate data in the form of a two-dimensional chart of three or more quantitative variables represented on axes starting from the same point. The relative position and angle of the axes are typically uninformative.” -- Source Wikipedia.

Step 1 Add a .NET Core API Controller

Add a .NET Core API Controller “RadarChartController” for getting radar chart data.

RadarChartController.cs

using System.Collections.Generic;
using Microsoft.AspNetCore.Mvc;

namespace AngularCharts.Controllers
{
    [Produces("application/json")]
    [Route("api/RadarChart")]
    public class RadarChartController : Controller
    {
        [HttpGet("[action]")]
        public RadarChartData GetRadarChartData()
        {
            List<ChartData> data = new List<ChartData>();
            data.Add(new ChartData { Data = new decimal[] { 18.5m, 17.9m, 4.3m, 3.5m, 2.8m }, Label = "Population %" });
            data.Add(new ChartData { Data = new decimal[] { 15.1m, 3.15m, 24.9m, 1.31m, 2.75m }, Label = "GDP Nominal %" });
            string[] Countries = { "China", "India", "USA", "Indonesia", "Brazil" };
            return new RadarChartData { ChartData = data, ChartLabels = Countries, ChartType = "radar" };
        }
    }

    public class ChartData
    {
        public decimal[] Data { get; set; }
        public string Label { get; set; }
    }

    public class RadarChartData
    {
        public List<ChartData> ChartData { get; set; }
        public string[] ChartLabels { get; set; }
        public string ChartType { get; set; }
    }
}

Step 2 Add an angular component

Add an angular component “RadarChartComponent” for creating a radar chart.

radar-chart.component.ts

import { Component, Inject } from '@angular/core';
import { Http } from '@angular/http';

@Component({
    selector: 'app-radar-chart',
    templateUrl: './radar-chart.component.html',
    styleUrls: ['./radar-chart.component.css']
})

export class RadarChartComponent {

    public chart: RadarChartData;
    constructor(http: Http, @Inject('BASE_URL') baseUrl: string) {
        http.get(baseUrl + 'api/RadarChart/GetRadarChartData').subscribe(result => {
            this.chart = result.json() as RadarChartData;
        }, error => console.error(error));
    }
}

interface ChartData {
    data: Array<number>;
    label: string;
}

interface RadarChartData {
    chartData: ChartData[];
    chartLabels: string[];
}

radar-chart.component.html

<h1> Radar Chart Population(%) & GDP Nominal(%)</h1>
<div class="row" *ngIf="chart">
    <div style="display: block;">
        <canvas baseChart
                [datasets]="chart.chartData"
                [labels]="chart.chartLabels"
                [chartType]="chart.chartType"></canvas>
    </div>
</div>

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.

So far, I have explained about the 10 most popular charts with complete code. For convenience, I have also attached the complete project. You can download it and try by yourself.