Post
Ask Question

Creating Charts With ASP.NET Core

In this article, I will be explaining how to integrate chart.js with your Asp.Net Core application with 4 different types of charts, which are: 
  1. Pie
  2. Bar
  3. Line
  4. Stacked Bar 
Creation and usage of the Pie, Bar and Line Charts are very similar but the stacked chart is a bit more complex. Basically, a chart is a key-value list grouped in an animated way making it easier to understand and see the numbers, except for the stacked chart which has two keys and a value. A more detailed explanation will be placed with each example.

What is chart.js? 

"Simple, clean and engaging HTML5 based JavaScript charts. Chart.js is an easy way to include animated, interactive graphs on your website for free."  https://www.chartjs.org/

Pre-requisite?

We have two prerequisites that must be loaded at every each view with a chart as content, and they are the Jquery and Chart.js libraries:
  1. <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.bundle.min.js"></script>    
  2. <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>    
Models used here 

SimpleReportViewModel
  1. public class SimpleReportViewModel  
  2.    {  
  3.        public string DimensionOne { get; set; }  
  4.        public int Quantity { get; set; }  
  5.    }  
StackedViewModel
  1. public class StackedViewModel  
  2. {  
  3.     public string StackedDimensionOne { get; set; }  
  4.     public List<SimpleReportViewModel> LstData { get; set; }  
  5. }  
Bar Chart

Controller Action
  1. public IActionResult Bar()  
  2.         {  
  3.             private Random rnd = new Random();  
  4.             //list of department  
  5.             var lstModel = new List<SimpleReportViewModel>();  
  6.             lstModel.Add( new SimpleReportViewModel  
  7.             {  
  8.                 DimensionOne = "Technology",  
  9.                 Quantity = rnd.Next( 10 )  
  10.             } );  
  11.             lstModel.Add( new SimpleReportViewModel  
  12.             {  
  13.                 DimensionOne = "Sales",  
  14.                 Quantity = rnd.Next( 10 )  
  15.             } );  
  16.             lstModel.Add( new SimpleReportViewModel  
  17.             {  
  18.                 DimensionOne = "Marketing",  
  19.                 Quantity = rnd.Next( 10 )  
  20.             } );  
  21.             lstModel.Add( new SimpleReportViewModel  
  22.             {  
  23.                 DimensionOne = "Human Resource",  
  24.                 Quantity = rnd.Next( 10 )  
  25.             } );  
  26.             lstModel.Add( new SimpleReportViewModel  
  27.             {  
  28.                 DimensionOne = "Research and Development",  
  29.                 Quantity = rnd.Next( 10 )  
  30.             } );  
  31.             lstModel.Add( new SimpleReportViewModel  
  32.             {  
  33.                 DimensionOne = "Acconting",  
  34.                 Quantity = rnd.Next( 10 )  
  35.             } );  
  36.             lstModel.Add( new SimpleReportViewModel  
  37.             {  
  38.                 DimensionOne = "Support",  
  39.                 Quantity = rnd.Next( 10 )  
  40.             } );  
  41.             lstModel.Add( new SimpleReportViewModel  
  42.             {  
  43.                 DimensionOne = "Logistics",  
  44.                 Quantity = rnd.Next( 10 )  
  45.             } );  
  46.             return View( lstModel );  
  47.         }  
View 
  1. @model List<SimpleReportViewModel>  
  2. @{  
  3.     var XLabels = Newtonsoft.Json.JsonConvert.SerializeObject( Model.Select( x => x.DimensionOne ).ToList() );  
  4.     var YValues = Newtonsoft.Json.JsonConvert.SerializeObject( Model.Select( x => x.Quantity ).ToList() );  
  5.     ViewData["Title"] = "Bar Chart";  
  6. }  
  7.   
  8. <!DOCTYPE html>  
  9.   
  10. <html>  
  11. <head>  
  12.     <meta name="viewport" content="width=device-width" />  
  13.     <title>Bar</title>  
  14. </head>  
  15. <body>  
  16.     <div class="box-body">  
  17.   
  18.         <div class="chart-container">  
  19.             <canvas id="chart" style="width:100%; height:500px"></canvas>  
  20.         </div>  
  21.     </div>  
  22. </body>  
  23. </html>  
  24.   
  25. <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.bundle.min.js"></script>  
  26. <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>  
  27.   
  28. <script type="text/javascript">  
  29.         $(function () {  
  30.     var chartName = "chart";  
  31.         var ctx = document.getElementById(chartName).getContext('2d');  
  32.         var data = {  
  33.                 labels: @Html.Raw(XLabels),  
  34.                 datasets: [{  
  35.                     label: "Departments Chart",  
  36.                     backgroundColor: [  
  37.                         'rgba(255, 99, 132, 0.2)',  
  38.                         'rgba(54, 162, 235, 0.2)',  
  39.                         'rgba(255, 206, 86, 0.2)',  
  40.                         'rgba(75, 192, 192, 0.2)',  
  41.                         'rgba(153, 102, 255, 0.2)',  
  42.                         'rgba(255, 159, 64, 0.2)',  
  43.                         'rgba(255, 0, 0)',  
  44.                         'rgba(0, 255, 0)',  
  45.                         'rgba(0, 0, 255)',  
  46.                         'rgba(192, 192, 192)',  
  47.                         'rgba(255, 255, 0)',  
  48.                         'rgba(255, 0, 255)'  
  49.                     ],  
  50.                     borderColor: [  
  51.                         'rgba(255,99,132,1)',  
  52.                         'rgba(54, 162, 235, 1)',  
  53.                         'rgba(255, 206, 86, 1)',  
  54.                         'rgba(75, 192, 192, 1)',  
  55.                         'rgba(153, 102, 255, 1)',  
  56.                         'rgba(255, 159, 64, 1)',  
  57.                         'rgba(255, 0, 0)',  
  58.                         'rgba(0, 255, 0)',  
  59.                         'rgba(0, 0, 255)',  
  60.                         'rgba(192, 192, 192)',  
  61.                         'rgba(255, 255, 0)',  
  62.                         'rgba(255, 0, 255)'  
  63.                     ],  
  64.                     borderWidth: 1,  
  65.                     data: @Html.Raw(YValues)  
  66.     }]  
  67.             };  
  68.   
  69. var options = {  
  70.                 maintainAspectRatio: false,  
  71.                 scales: {  
  72.                     yAxes: [{  
  73.                         ticks: {  
  74.                             min: 0,  
  75.                             beginAtZero: true  
  76.                         },  
  77.                         gridLines: {  
  78.                             display: true,  
  79.                             color: "rgba(255,99,164,0.2)"  
  80.                         }  
  81. }],  
  82.                     xAxes: [{  
  83.                         ticks: {  
  84.                             min: 0,  
  85.                             beginAtZero: true  
  86.                         },  
  87.                         gridLines: {  
  88.                             display: false  
  89.                         }  
  90.                     }]  
  91.                 }  
  92.             };  
  93.   
  94.        var myChart = new  Chart(ctx, {  
  95.                 options: options,  
  96.                 data: data,  
  97.                 type:'bar'  
  98.   
  99.             });  
  100.         });  
  101. </script>  

 Result

Result
Explanation

Here we use the SimpleReportViewModel because we have a simple bar chart with a department list and their head number

Pie Chart

Controller Action 
  1. public IActionResult Pie()  
  2.         {  
  3.             private Random rnd = new Random();  
  4.             //list of drinks  
  5.             var lstModel = new List<SimpleReportViewModel>();  
  6.             lstModel.Add( new SimpleReportViewModel  
  7.             {  
  8.                 DimensionOne = "Beer",  
  9.                 Quantity = rnd.Next( 10 )  
  10.             } );  
  11.             lstModel.Add( new SimpleReportViewModel  
  12.             {  
  13.                 DimensionOne = "Wine",  
  14.                 Quantity = rnd.Next( 10 )  
  15.             } );  
  16.             lstModel.Add( new SimpleReportViewModel  
  17.             {  
  18.                 DimensionOne = "Whisky",  
  19.                 Quantity = rnd.Next( 10 )  
  20.             } );  
  21.             lstModel.Add( new SimpleReportViewModel  
  22.             {  
  23.                 DimensionOne = "Water",  
  24.                 Quantity = rnd.Next( 10 )  
  25.             } );  
  26.             return View( lstModel );  
  27.         }  
View  
  1. @using System.Linq;  
  2. @model List<SimpleReportViewModel>  
  3. @{  
  4.     var XLabels = Newtonsoft.Json.JsonConvert.SerializeObject( Model.Select( x => x.DimensionOne ).ToList() );  
  5.     var YValues = Newtonsoft.Json.JsonConvert.SerializeObject( Model.Select( x => x.Quantity ).ToList() );  
  6.     ViewData["Title"] = "Pie Chart";  
  7. }  
  8.   
  9. <!DOCTYPE html>  
  10.   
  11. <html>  
  12. <head>  
  13.     <meta name="viewport" content="width=device-width" />  
  14.     <title>Pie</title>  
  15. </head>  
  16. <body>  
  17.     <div class="box-body">  
  18.   
  19.         <div class="chart-container">  
  20.             <canvas id="chart" style="width:100%; height:500px"></canvas>  
  21.         </div>  
  22.     </div>  
  23. </body>  
  24. </html>  
  25.   
  26. <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.bundle.min.js"></script>  
  27. <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>  
  28.   
  29. <script type="text/javascript">  
  30.         $(function () {  
  31.     var chartName = "chart";  
  32.         var ctx = document.getElementById(chartName).getContext('2d');  
  33.         var data = {  
  34.                 labels: @Html.Raw(XLabels),  
  35.                 datasets: [{  
  36.                     label: "Drinks Chart",  
  37.                     backgroundColor: [  
  38.                         'rgba(255, 99, 132, 0.2)',  
  39.                         'rgba(54, 162, 235, 0.2)',  
  40.                         'rgba(255, 206, 86, 0.2)',  
  41.                         'rgba(75, 192, 192, 0.2)',  
  42.                         'rgba(153, 102, 255, 0.2)',  
  43.                         'rgba(255, 159, 64, 0.2)',  
  44.                         'rgba(255, 0, 0)',  
  45.                         'rgba(0, 255, 0)',  
  46.                         'rgba(0, 0, 255)',  
  47.                         'rgba(192, 192, 192)',  
  48.                         'rgba(255, 255, 0)',  
  49.                         'rgba(255, 0, 255)'  
  50.                     ],  
  51.                     borderColor: [  
  52.                         'rgba(255,99,132,1)',  
  53.                         'rgba(54, 162, 235, 1)',  
  54.                         'rgba(255, 206, 86, 1)',  
  55.                         'rgba(75, 192, 192, 1)',  
  56.                         'rgba(153, 102, 255, 1)',  
  57.                         'rgba(255, 159, 64, 1)',  
  58.                         'rgba(255, 0, 0)',  
  59.                         'rgba(0, 255, 0)',  
  60.                         'rgba(0, 0, 255)',  
  61.                         'rgba(192, 192, 192)',  
  62.                         'rgba(255, 255, 0)',  
  63.                         'rgba(255, 0, 255)'  
  64.                     ],  
  65.                     borderWidth: 1,  
  66.                     data: @Html.Raw(YValues)  
  67.     }]  
  68.             };  
  69.   
  70. var options = {  
  71.                 maintainAspectRatio: false,  
  72.                 scales: {  
  73.                     yAxes: [{  
  74.                         ticks: {  
  75.                             min: 0,  
  76.                             beginAtZero: true  
  77.                         },  
  78.                         gridLines: {  
  79.                             display: true,  
  80.                             color: "rgba(255,99,164,0.2)"  
  81.                         }  
  82. }],  
  83.                     xAxes: [{  
  84.                         ticks: {  
  85.                             min: 0,  
  86.                             beginAtZero: true  
  87.                         },  
  88.                         gridLines: {  
  89.                             display: false  
  90.                         }  
  91.                     }]  
  92.                 }  
  93.             };  
  94.   
  95.        var myChart = new  Chart(ctx, {  
  96.                 options: options,  
  97.                 data: data,  
  98.                 type:'pie'  
  99.   
  100.             });  
  101.         });  
  102. </script>  

Result

  Result

Explanation

Here we also use the SimpleReportViewModel because we have a simple pie chart with a drink list and their quantity number.

Line Chart 

Controller Action
  1. public IActionResult Line()  
  2.        {  
  3.            private Random rnd = new Random();  
  4.            //list of countries  
  5.            var lstModel = new List<SimpleReportViewModel>();  
  6.            lstModel.Add( new SimpleReportViewModel  
  7.            {  
  8.                DimensionOne = "Brazil",  
  9.                Quantity = rnd.Next( 10 )  
  10.            } );  
  11.            lstModel.Add( new SimpleReportViewModel  
  12.            {  
  13.                DimensionOne = "USA",  
  14.                Quantity = rnd.Next( 10 )  
  15.            } );  
  16.            lstModel.Add( new SimpleReportViewModel  
  17.            {  
  18.                DimensionOne = "Portugal",  
  19.                Quantity = rnd.Next( 10 )  
  20.            } );  
  21.            lstModel.Add( new SimpleReportViewModel  
  22.            {  
  23.                DimensionOne = "Russia",  
  24.                Quantity = rnd.Next( 10 )  
  25.            } );  
  26.            lstModel.Add( new SimpleReportViewModel  
  27.            {  
  28.                DimensionOne = "Ireland",  
  29.                Quantity = rnd.Next( 10 )  
  30.            } );  
  31.            lstModel.Add( new SimpleReportViewModel  
  32.            {  
  33.                DimensionOne = "Germany",  
  34.                Quantity = rnd.Next( 10 )  
  35.            } );  
  36.            return View( lstModel );  
  37.        }  
View
  1. @model List<SimpleReportViewModel>  
  2. @{  
  3.     var XLabels = Newtonsoft.Json.JsonConvert.SerializeObject( Model.Select( x => x.DimensionOne ).ToList() );  
  4.     var YValues = Newtonsoft.Json.JsonConvert.SerializeObject( Model.Select( x => x.Quantity ).ToList() );  
  5.     ViewData["Title"] = "Line Chart";  
  6. }  
  7.   
  8. <!DOCTYPE html>  
  9.   
  10. <html>  
  11. <head>  
  12.     <meta name="viewport" content="width=device-width" />  
  13.     <title>Line</title>  
  14. </head>  
  15. <body>  
  16.     <div class="box-body">  
  17.   
  18.         <div class="chart-container">  
  19.             <canvas id="chart" style="width:100%; height:500px"></canvas>  
  20.         </div>  
  21.     </div>  
  22. </body>  
  23. </html>  
  24. <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.bundle.min.js"></script>  
  25. <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>  
  26.   
  27. <script type="text/javascript">  
  28.         $(function () {  
  29.     var chartName = "chart";  
  30.         var ctx = document.getElementById(chartName).getContext('2d');  
  31.         var data = {  
  32.                 labels: @Html.Raw(XLabels),  
  33.                 datasets: [{  
  34.                     label: "Countries Chart",  
  35.                     backgroundColor: [  
  36.                         'rgba(255, 99, 132, 0.2)',  
  37.                         'rgba(54, 162, 235, 0.2)',  
  38.                         'rgba(255, 206, 86, 0.2)',  
  39.                         'rgba(75, 192, 192, 0.2)',  
  40.                         'rgba(153, 102, 255, 0.2)',  
  41.                         'rgba(255, 159, 64, 0.2)',  
  42.                         'rgba(255, 0, 0)',  
  43.                         'rgba(0, 255, 0)',  
  44.                         'rgba(0, 0, 255)',  
  45.                         'rgba(192, 192, 192)',  
  46.                         'rgba(255, 255, 0)',  
  47.                         'rgba(255, 0, 255)'  
  48.                     ],  
  49.                     borderColor: [  
  50.                         'rgba(255,99,132,1)',  
  51.                         'rgba(54, 162, 235, 1)',  
  52.                         'rgba(255, 206, 86, 1)',  
  53.                         'rgba(75, 192, 192, 1)',  
  54.                         'rgba(153, 102, 255, 1)',  
  55.                         'rgba(255, 159, 64, 1)',  
  56.                         'rgba(255, 0, 0)',  
  57.                         'rgba(0, 255, 0)',  
  58.                         'rgba(0, 0, 255)',  
  59.                         'rgba(192, 192, 192)',  
  60.                         'rgba(255, 255, 0)',  
  61.                         'rgba(255, 0, 255)'  
  62.                     ],  
  63.                     borderWidth: 1,  
  64.                     data: @Html.Raw(YValues)  
  65.     }]  
  66.             };  
  67.   
  68. var options = {  
  69.                 maintainAspectRatio: false,  
  70.                 scales: {  
  71.                     yAxes: [{  
  72.                         ticks: {  
  73.                             min: 0,  
  74.                             beginAtZero: true  
  75.                         },  
  76.                         gridLines: {  
  77.                             display: true,  
  78.                             color: "rgba(255,99,164,0.2)"  
  79.                         }  
  80. }],  
  81.                     xAxes: [{  
  82.                         ticks: {  
  83.                             min: 0,  
  84.                             beginAtZero: true  
  85.                         },  
  86.                         gridLines: {  
  87.                             display: false  
  88.                         }  
  89.                     }]  
  90.                 }  
  91.             };  
  92.   
  93.        var myChart = new  Chart(ctx, {  
  94.                 options: options,  
  95.                 data: data,  
  96.                 type:'line'  
  97.   
  98.             });  
  99.         });  
  100. </script>  

Result 

  Result

Explanation

Here we also use the SimpleReportViewModel because we have a simple line chart with a country list and their quantity number.

Stacked Chart

Controller Action 
  1. public IActionResult Stacked()  
  2.        {  
  3.            private Random rnd = new Random();  
  4.            var lstModel = new List<StackedViewModel>();  
  5.            //sales of product sales by quarter  
  6.            lstModel.Add( new StackedViewModel  
  7.            {  
  8.                StackedDimensionOne = "First Quarter",  
  9.                LstData = new List<SimpleReportViewModel>()  
  10.                {  
  11.                    new SimpleReportViewModel()  
  12.                    {  
  13.                        DimensionOne="TV",  
  14.                        Quantity = rnd.Next(10)  
  15.                    },  
  16.                    new SimpleReportViewModel()  
  17.                    {  
  18.                        DimensionOne="Games",  
  19.                        Quantity = rnd.Next(10)  
  20.                    },  
  21.                    new SimpleReportViewModel()  
  22.                    {  
  23.                        DimensionOne="Books",  
  24.                        Quantity = rnd.Next(10)  
  25.                    }  
  26.                }  
  27.            } );  
  28.            lstModel.Add( new StackedViewModel  
  29.            {  
  30.                StackedDimensionOne = "Second Quarter",  
  31.                LstData = new List<SimpleReportViewModel>()  
  32.                {  
  33.                    new SimpleReportViewModel()  
  34.                    {  
  35.                        DimensionOne="TV",  
  36.                        Quantity = rnd.Next(10)  
  37.                    },  
  38.                    new SimpleReportViewModel()  
  39.                    {  
  40.                        DimensionOne="Games",  
  41.                        Quantity = rnd.Next(10)  
  42.                    },  
  43.                    new SimpleReportViewModel()  
  44.                    {  
  45.                        DimensionOne="Books",  
  46.                        Quantity = rnd.Next(10)  
  47.                    }  
  48.                }  
  49.            } );  
  50.            lstModel.Add( new StackedViewModel  
  51.            {  
  52.                StackedDimensionOne = "Third Quarter",  
  53.                LstData = new List<SimpleReportViewModel>()  
  54.                {  
  55.                    new SimpleReportViewModel()  
  56.                    {  
  57.                        DimensionOne="TV",  
  58.                        Quantity = rnd.Next(10)  
  59.                    },  
  60.                    new SimpleReportViewModel()  
  61.                    {  
  62.                        DimensionOne="Games",  
  63.                        Quantity = rnd.Next(10)  
  64.                    },  
  65.                    new SimpleReportViewModel()  
  66.                    {  
  67.                        DimensionOne="Books",  
  68.                        Quantity = rnd.Next(10)  
  69.                    }  
  70.                }  
  71.            } );  
  72.            lstModel.Add( new StackedViewModel  
  73.            {  
  74.                StackedDimensionOne = "Fourth Quarter",  
  75.                LstData = new List<SimpleReportViewModel>()  
  76.                {  
  77.                    new SimpleReportViewModel()  
  78.                    {  
  79.                        DimensionOne="TV",  
  80.                        Quantity = rnd.Next(10)  
  81.                    },  
  82.                    new SimpleReportViewModel()  
  83.                    {  
  84.                        DimensionOne="Games",  
  85.                        Quantity = rnd.Next(10)  
  86.                    },  
  87.                    new SimpleReportViewModel()  
  88.                    {  
  89.                        DimensionOne="Books",  
  90.                        Quantity = rnd.Next(10)  
  91.                    }  
  92.                }  
  93.            } );  
  94.            return View( lstModel );  
  95.        }  
View
  1. @model List < StackedViewModel > @ {  
  2.     var XLabels = Newtonsoft.Json.JsonConvert.SerializeObject(Model.FirstOrDefault().LstData.Select(x => x.DimensionOne).ToList());  
  3.     var YValues = Newtonsoft.Json.JsonConvert.SerializeObject(Model.Select(x => x.LstData.Select(w => w.Quantity)).ToList());  
  4.     var label2 = Newtonsoft.Json.JsonConvert.SerializeObject(Model.Select(x => x.StackedDimensionOne).ToList());  
  5.     ViewData["Title"] = "Stacked Chart";  
  6. } < !DOCTYPE html > < html > < head > < meta name = "viewport"  
  7. content = "width=device-width" / > < title > Stacked < /title> < /head> < body > < div class = "box-body" > < div class = "chart-container" > < canvas id = "chartStacked"  
  8. style = "width:100%; height:500px" > < /canvas> < /div> < /div> < /body> < /html> < script src = "https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.bundle.min.js" > < /script> < script src = "https://code.jquery.com/jquery-3.3.1.min.js" > < /script> < script type = "text/javascript" > $(function() {  
  9.     var chartName = "chartStacked";  
  10.     var ctx = document.getElementById(chartName).getContext('2d');  
  11.     var XLabels = @Html.Raw(XLabels);  
  12.     var YValues = @Html.Raw(YValues);  
  13.     var label = @Html.Raw(label2);  
  14.     var aux = 0;  
  15.     var barChartData = {  
  16.         labels: @Html.Raw(label2),  
  17.         datasets: []  
  18.     }  
  19.     XLabels.forEach(function(a, i) {  
  20.         var data = [];  
  21.         YValues.forEach(function(a, i) {  
  22.             data.push(a[aux]);  
  23.         });  
  24.         barChartData.datasets.push({  
  25.             label: XLabels[aux],  
  26.             backgroundColor: random_rgba(),  
  27.             data: data  
  28.         });  
  29.         aux++;  
  30.     });  
  31.     var options = {  
  32.         maintainAspectRatio: false,  
  33.         scales: {  
  34.             yAxes: [{  
  35.                 ticks: {  
  36.                     min: 0,  
  37.                     beginAtZero: true  
  38.                 },  
  39.                 stacked: true,  
  40.                 gridLines: {  
  41.                     display: true,  
  42.                     color: "rgba(255,99,164,0.2)"  
  43.                 }  
  44.             }],  
  45.             xAxes: [{  
  46.                 stacked: true,  
  47.                 gridLines: {  
  48.                     display: false  
  49.                 }  
  50.             }]  
  51.         }  
  52.     };  
  53.   
  54.     function random_rgba() {  
  55.         var o = Math.round,  
  56.             r = Math.random,  
  57.             s = 255;  
  58.         return 'rgba(' + o(r() * s) + ',' + o(r() * s) + ',' + o(r() * s) + ',' + r().toFixed(1) + ')';  
  59.     }  
  60.     var myChart = new Chart(ctx, {  
  61.         options: options,  
  62.         data: barChartData,  
  63.         type: 'bar'  
  64.     });  
  65. }); < /script>  
Result
Result 
Explanation

Here we use the StackedViewModel because we have a stacked chart with the number of product sales by quarter.

Ps.: Javascript is needed here to order the data from the model to chart.js dataset. 
 
Congratulations, you have successfully integrated Chart.Js with your Asp.net Core application. 


Similar Articles