Sunday, January 29, 2023

Visualizing data with Chart.js in ASP.NET 7.0

With time, the volume of data in our databases increases exponentially. Excessive raw data is simply noise if we cannot summarize, examine, and visualize the information. In today’s tutorial, we will look at one way of visualizing data using Chart.js. This is a free JavaScript library that you can use within any web application technology. We will, of course, see how we can use Chart.js in an ASP.NET 7.0 web app. I will be using Visual Studio Code & the SQLite database in this tutorial.

Source Code: 
Companion Video:

VS Code extensions needed:

  • C#
  • C# Extensions

Razor Pages

In a suitable working directory, create a Razor Pages web application with:

dotnet new razor -f net7.0 --auth individual -o ChartJsRazor
cd ChartJsRazor
mkdir Models
code .
dotnet watch

I chose to create a web app with individual authentication simply because it automatically adds support for Entity Framework and SQLite. 

Sample Data

We will be importing sample data from a CSV file, students.csv, that contains some sample student data. Therefore, we will add this package to help us with the CSV file import process. 

dotnet add package CsvHelper

Here is a sample of what data in Data/students.csv looks like:



Create a class file named Student.cs in the Models folder with the following content.

public class Student {
   public int StudentId { get; set; }
   public string? LastName { get; set; }
   public string? FirstName { get; set; }
   public string? School { get; set; }

Add the following code to Data/ApplicationDbContext.cs to specify the Students DbSet and to also import sample data from Data/students.csv:

public DbSet<Student> Students => Set<Student>();
private static IEnumerable<Student> GetStudents() {
    string[] p = { Directory.GetCurrentDirectory(), "Data", "students.csv" };
    var csvFilePath = Path.Combine(p);
    var config = new CsvConfiguration(CultureInfo.InvariantCulture) {
        PrepareHeaderForMatch = args => args.Header.ToLower(),
    var data = new List<Student>().AsEnumerable();
    using (var reader = new StreamReader(csvFilePath)) {
        using (var csvReader = new CsvReader(reader, config)) {
            data = (csvReader.GetRecords<Student>()).ToList();
    return data;
protected override void OnModelCreating(ModelBuilder modelBuilder) {

In the above code, students data is being seeded in the OnModelCreating() method by reading contents of students.csv file.

Let us add a migration and subsequently update the database. Execute the following CLI commands in a terminal window.

dotnet ef migrations add Student -o Data/Migrations
dotnet ef database update

At this point the database and tables are created.

Chart.js library

The official website for Chart.js is where you can find documentation and examples. You can either point to the Chart.js JavaScript library on an online CDN (Content Delivery Network) or download and install the library directly into your application. 

Chart.js library online CDN

This is the link you can use to point to an online library:

<script src=""></script>

Download Chart.js library

Run the following command if you do not already have the LibMan .NET tool:

dotnet tool install -g Microsoft.Web.LibraryManager.Cli

Run the following command to get the Chart.js client library by using LibMan

libman install chartjs --provider jsdelivr --destination wwwroot/lib/chartjs --files chart.min.js --files chart.js

This places the chart.js JavaScript files in the wwwroot/lib/chartjs folder.

Vertical Bar Chart

We will re-purpose the Pages/Index.cshtml & Pages/Index.cshtml.cs files so that they render charts that reveal how many students are in each school. We will add a class Models/SchoolCount.cs that simply holds two properties: School (string) and Count (int). Add the following SchoolCount class to the Models folder:

public class SchoolCount {
    public string? Name { get; set; }
    public int Count { get; set; }

Add the following highlighted code to Pages/Index.cshtml.cs:

class IndexModel : PageModel
    private readonly ILogger<IndexModel> _logger;
    private readonly ApplicationDbContext _context;

    public List<SchoolCount> ChartData { get; set; } = default!;

    public IndexModel(ILogger<IndexModel> logger,
    ApplicationDbContext context)
        _logger = logger;
        _context = context;

    public void OnGet() {
        List<SchoolCount> studentsInSchool = new List<SchoolCount>();

        var data = _context.Students
           .GroupBy(_ => _.School)
           .Select(g => new {
               Name = g.Key,
               Count = g.Count()
           .OrderByDescending(cp => cp.Count)

        foreach (var item in data) {
            studentsInSchool.Add(new SchoolCount() {
                Name = item.Name,
                Count = item.Count

        ChartData = studentsInSchool;

If you put a breakpoint to inspect the data that is being assigned to ChartData, you will find out the following:

Computing 15
Business 15
Nursing 13
Mining 9
Medicing 6

The real interaction with the Chart.js JavaScript library will happen the Pages/Index.cshtml file. We will first display a simple vertical bar chart. Replace the contents of Pages/Index.cshtml with the following:

@model IndexModel
    ViewData["Title"] = "Chart.js";

<div class="text-center">
    <h4 class="display-4">Students by school</h4>
        <div class="card">
            <div class="card-header">Vertical Bar Chart</div>
            <div class="chart-container">
                <canvas id="bar-chart" width="100" height="300"></canvas>

<script src=""></script>
@* <script src="lib/chartjs/chart.min.js"></script> *@


    var Count = [];
    var Schools = [];

    @if (Model.ChartData.Count > 0)
        foreach (var item in Model.ChartData)
    var School = {
        label: "School",
        data: Count,
        backgroundColor: [
            'rgba(255, 99, 132, 0.2)',
            'rgba(54, 162, 235, 0.2)',
            'rgba(255, 206, 86, 0.2)',
            'rgba(75, 192, 192, 0.2)',
            'rgba(153, 102, 255, 0.2)',
            'rgba(255, 159, 64, 0.2)'
        borderColor: [
            'rgba(255, 99, 132, 1)',
            'rgba(54, 162, 235, 1)',
            'rgba(255, 206, 86, 1)',
            'rgba(75, 192, 192, 1)',
            'rgba(153, 102, 255, 1)',
            'rgba(255, 159, 64, 1)'
        borderWidth: 1,
        lineTension: 0,

    var datasetvalues = {
        labels: Schools, // x-azis label values
        datasets: [School] // y-axis

    barChartOptions = {
        indexAxis: 'x',
        responsive: true,
        maintainAspectRatio: false,
        scales: {
            x: {
                barPercentage: 1,
                categoryPercentage: 0.6,
            y: {
                barPercentage: 1,
                categoryPercentage: 0.6,
                ticks: {
                    beginAtZero: true
        plugins: {
            title: {
                display: true,
                text: 'Students by school'

    var verticalBarChart = new Chart(
        document.getElementById('bar-chart').getContext('2d'), {
        type: 'bar',
        data: datasetvalues,
        options: barChartOptions


Explaining the code:

1) At first, we place a <canvas> element in our markup where the chart will be injected:

<canvas id="bar-chart" width="100" height="300"></canvas>

2) Load the Chart.js library from a CDN:

<script src=""></script>

We could, instead, use a locally available library with:

<script src="lib/chartjs/chart.min.js"></script>

3) We then declare two JavaScript arrays (Count & Schools), which will contain the count and names of schools respectively. The data in the C# ChartData collection will then populate these two arrays. You may find the “@:” operator in the foreach loop strange. This simply renders the line as HTML (in this case JavaScript).

var Count = [];
var Schools = [];

@if (Model.ChartData.Count > 0) {
    foreach (var item in Model.ChartData)

4) The School object describes the design of the bars and the data source for the count in the chart

5) The datasetvalues object describes the data source of the school names

6) The barChartOptions object describes the chart options

7) Finally the new Chart(….) command is what actually creates the chart using the previously described objects.

This is what our bar-chart looks like:

From this chart we can gather that most of our students are studying Nursing & Business.  Medicine has the least students. We need more medical doctors.

Horizontal Bar Chart

The horizontal bar-chart is like the previous bar-chart, except that the bars display horizontally. To add a horizontal bar-chart, add this markup after the previous bar chart and inside <div class="card">:

<div class="card-header">Horizontal bar chart</div>
<div class="chart-container">
    <canvas id="horizontal-bar-chart" width="100" height="300"></canvas>

Add the following code below “var verticalBarChart . . . ” at the bottom of Index.chtml:

horizonntalBarChartOptions = barChartOptions;
horizonntalBarChartOptions['indexAxis'] = 'y' ;
delete horizonntalBarChartOptions.scales;
var horizonntalBarChart = new Chart(
    document.getElementById('horizontal-bar-chart').getContext('2d'), {
    type: 'bar',
    data: datasetvalues,
    options: horizonntalBarChartOptions

In the above code, we make a copy of the barChartOptions and modify it slightly:
  • Set 'indexAxis' to ‘y’
  • Delete scales
Our horizontal bar-chart looks like this:

Other types of charts

Using the same data, let us add these charts:
  • pie-chart
  • doughnut-chart
  • polar-area-chart
Add this HTML under similar markup for the horizontal bar-chart so that we have canvas elements for the three additional charts that we require:

<div class="card-header">Pie chart</div>
<div class="chart-container">
    <canvas id="pie-chart" width="100" height="300"></canvas>
<div class="card-header">Doughnut chart</div>
<div class="chart-container">
    <canvas id="doughnut-chart" width="100" height="300"></canvas>
<div class="card-header">Polar area chart</div>
<div class="chart-container">
    <canvas id="polar-area-chart" width="100" height="300"></canvas>

Add the following code below “var horizonntalBarChart . . . ” at the bottom of Index.chtml:

pieChartOptions = barChartOptions;
delete pieChartOptions.indexAxis;
delete pieChartOptions.scales;

var pieChart = new Chart(
    document.getElementById('pie-chart').getContext('2d'), {
    type: 'pie',
    data: datasetvalues,
    options: pieChartOptions

var doughnutChart = new Chart(
    document.getElementById('doughnut-chart').getContext('2d'), {
        type: 'doughnut',
        data: datasetvalues,
        options: pieChartOptions

var polarAreaChart = new Chart(
    document.getElementById('polar-area-chart').getContext('2d'), {
    type: 'polarArea',
    data: datasetvalues,
    options: pieChartOptions

We should see these additional charts on our home page:


In addition to the five chart types that we created, there are many more others that you can use such as: Area Chart, Bubble Chart, Line Chart, Radar Chart, Scatter Chart, etc…

You have control over the colors, scales, and other features. Best of all, it is easy and can be used with any backend technology such as ASP.NET, PHP, Node, etc…

No comments:

Post a Comment