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. }
  8. <!DOCTYPE html>
  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">
  18. <div class="chart-container">
  19. <canvas id="chart" style="width:100%; height:500px"></canvas>
  20. </div>
  21. </div>
  22. </body>
  23. </html>
  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>
  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. };
  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. };
  94. var myChart = new Chart(ctx, {
  95. options: options,
  96. data: data,
  97. type:'bar'
  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. }
  9. <!DOCTYPE html>
  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">
  19. <div class="chart-container">
  20. <canvas id="chart" style="width:100%; height:500px"></canvas>
  21. </div>
  22. </div>
  23. </body>
  24. </html>
  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>
  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. };
  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. };
  95. var myChart = new Chart(ctx, {
  96. options: options,
  97. data: data,
  98. type:'pie'
  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. }
  8. <!DOCTYPE html>
  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">
  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>
  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. };
  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. };
  93. var myChart = new Chart(ctx, {
  94. options: options,
  95. data: data,
  96. type:'line'
  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. };
  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.