title: Add Commas to ChartJS Data Points
body: <p>I need to add commas to numbers in a ChartJS graph. Ex. Data points might be 1032.05, 4334.75, 8482.46 and I need it to display as 1,032.05, 4,334.75, 8,482.46. </p>
  
  <p>Here is the link to a development site with current code: <a href="http://investingcalculator.azurewebsites.net/" rel="nofollow">http://investingcalculator.azurewebsites.net/</a></p>
  
  <p>I am currently passing in the values as an array on calculate and since arrays are comma delimitated, I am not sure how to change the data points to have commas.</p>
  
  <p>My calculate code is as follows. Please note that I am using requires:</p>
  
  <pre><code>define(['jquery', 'chartjs'], function ($) {
  
  var investCalc = {
  
      calculate: function () {
  
          var currentbalance = $("#currentbalance");
          var interestrate = $("#interestrate");
          var yearscontributing = $("#yearscontributing");
          var monthlycontribution = $("#monthlycontribution");
  
          var year = [];
          var yearlybalance = [];
  
          $('#calculate').on('click', function () {
  
              var P = parseFloat(currentbalance.val());
              var r = parseFloat(interestrate.val());
              var t = parseFloat(yearscontributing.val());
              var add = parseFloat(monthlycontribution.val());
              var addtotal = add * 12;
              if (isNaN(P) || isNaN(r) || isNaN(t) || isNaN(add)) {
                  alert('All Inputs Must Be Numbers');
                  return;
              }
  
  
  
              // Loop to provide the value per year and push them into an array for consumption by the chart
              for (var i = 0; i &lt; t; i++) {
                  // Convert int of interest rate to proper decimal (ex. 8 = .08)
                  var actualrate = r / 100;
                  var A = (P + addtotal) * (1 + actualrate);
                  var P = A;
  
                  // Convert the loop from starting at 0 to print the actual year
                  startyear = i + 1;
                  actualyear = "Year " + startyear;
  
                  // Format the number output to 2 decimal places
                  formattedValue = A.toFixed(2);
                  endBalance = P.toFixed(2);
  
                  // Push the values in the array
                  year.push(actualyear);
                  yearlybalance.push(formattedValue);
              }
  
              $("#endingbalance").val(endBalance);
  
  
  
              // Bar chart
              var barChartData = {
                  labels: year,
                  datasets: [
                      {
                          label: "Investing Results",
                          fillColor: "rgba(151,187,205,0.2)",
                          strokeColor: "rgba(151,187,205,1)",
                          pointColor: "rgba(151,187,205,1)",
                          pointStrokeColor: "#fff",
                          pointHighlightFill: "#fff",
                          pointHighlightStroke: "rgba(151,187,205,1)",
                          data: yearlybalance
                      }
                  ]
              }
  
              var ctx = $("#canvas").get(0).getContext("2d");
              // This will get the first returned node in the jQuery collection.
              newBarChart = new Chart(ctx).Bar(barChartData, {
                  responsive: true
  
              });
              $('#calculate').hide();
  
  
              var chartjs = Chart.noConflict();
  
          });
  
          // Reset values and page
          $('#reset').on( 'click',  function  () {
  
              location.reload();
  
          });
      }
  };
  
   return investCalc;
  
    });
  </code></pre>