title: How to connect a charts.js chart to data
body: <p>I'm just starting to explore chartjs to display data in a Razor pages .net core application that I am building.  I've got a sample chart to load, but I would now like to render the chart with real data rather than the sample hard coded data.</p>
  <p>So.... where I have     data: [12, 19, 3, 5, 2, 3], then,instead of a list of numbers inside the square brackets, I would like to be able to use a data item that I have extracted from one or more of my tables and moved into the right format.  However, although it seems like an obvious thing to do, i can't seem to find the right way of doing this.   Any pointers would be very gratefully received.</p>
  <p>The Razor page cshtml is</p>
  <pre><code>@page
  @model Investments10.Pages.Reports.testReport2Model
  @{
    ViewData[&quot;Title&quot;] = &quot;testReport2&quot;;
   }
  
   &lt;h1&gt;testReport2&lt;/h1&gt;
  
  
   &lt;div class=&quot;chart-container&quot; width=&quot;600&quot; height=&quot;400&quot;&gt;
   &lt;canvas id=&quot;myChart&quot;&gt;&lt;/canvas&gt;
   &lt;/div&gt;
  
   &lt;script&gt;
       document.addEventListener('DOMContentLoaded', (event) =&gt; {
  
      var ctx = document.getElementById('myChart');
      var myChart = new Chart(ctx, @Html.Raw(Model.ChartJson) );
  
    });
   &lt;/script&gt;
  </code></pre>
  <p>and the page model behind it (the cshtml.cs file) is</p>
  <pre><code>using System;
  using System.Collections.Generic;
  using System.Linq;
  using System.Threading.Tasks;
  using Microsoft.AspNetCore.Mvc;
  using Microsoft.AspNetCore.Mvc.RazorPages;   
  using Microsoft.Extensions.Logging;
  using Newtonsoft.Json;
  using Investments10.Models;
  
  namespace Investments10.Pages.Reports
  {
  public class testReport2Model : PageModel
  {
      public ChartJs Chart { get; set; }
      public string ChartJson { get; set; }
  
      private readonly ILogger&lt;IndexModel&gt; _logger;
  
      public testReport2Model(ILogger&lt;IndexModel&gt; logger)
      {
          _logger = logger;
      }
  
      public void OnGet()
      {
          // Ref: https://www.chartjs.org/docs/latest/
          var chartData = @&quot;
          {
              type: 'bar',
              responsive: true,
              data:
              {
                  labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
                  datasets: [{
                      label: '# of Votes',
                      data: [12, 19, 3, 5, 2, 3],
                      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
                  }]
              },
              options:
              {
                  scales:
                  {
                      yAxes: [{
                          ticks:
                          {
                              beginAtZero: true
                          }
                      }]
                  }
              }
          }&quot;;
  
          Chart = JsonConvert.DeserializeObject&lt;ChartJs&gt;(chartData);
          ChartJson = JsonConvert.SerializeObject(Chart, new JsonSerializerSettings
          {
              NullValueHandling = NullValueHandling.Ignore,
          });
      }
  }
  }
  </code></pre>