title: Format Chart.JS Data Element To Be Currency
body: <p>I found that you can format the x or y axis of Chart.JS to currency by a quick JavaScript callback function</p>
  
  <pre><code>callback: function(value, index, values) {
      if (parseInt(value) &gt;= 1000) {
          return '$' + value.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
      } else {
          return '$' + value;
      }
  }
  }
  </code></pre>
  
  <p>but this does not seem to be the case for the <code>data:</code>  In my instance this is a JavaScript 1D Array that holds numeric values, and I want to add a dollar sign, and comma where applicable.  How can this be added with Charts.jS</p>
  
  <p><strong>EDIT</strong><br>
  This is how I am populating my JSON array - and I want to format the data in the <code>data: values</code></p>
  
  <pre><code>var barChartData = {
      labels: labelsarr,
      datasets: [{
          label: 'Amount',
          backgroundColor: 'rgba(200, 200, 200, 0.75)',
          borderColor: 'rgb(255, 99, 132)',
          borderWidth: 1,
          data: values
      }]
  
  };
  </code></pre>
  
  <p>And the JSON array is in this format <code>["AAAA",100,10000,2310,24420,30,50000,400000,70000,700,823200,923200,1111]</code></p>
  
  <p>I want to format starting at <code>index[1]</code> to show $ and currency.  How can this be achieved?</p>
  
  <p><strong>2nd Edit Time</strong><br>
  I try to add title and format both data points and left axis as currency with below syntax, but this no longer displays anything on my page.</p>
  
  <pre><code>var ctx = document.getElementById('canvas').getContext('2d');
  var chart = new Chart(ctx, {
      type: 'bar',
      data: {
          labels: labelsarr,
          datasets: [{
              label: 'Test',
              data: values,
              backgroundColor: 'rgba(0, 119, 204, 0.8)',
          }]
      },
      options: {
          responsive: true,
          scales: {
              yAxes: [{
                  ticks: {
                      beginAtZero: true,
                      callback: function(value, index, values) {
                          if (parseInt(value) &gt;= 1000) {
                              return '$' + value.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
                          } else {
                              return '$' + value;
                          }
                      }
                  }
              }]
          },
          legend: {
              position: 'top',
          },
          title: {
              display: true,
              text: '&lt;?php echo $name ?&gt; Test'
          }
          tooltips: {
              callbacks: {
                  label: function(t, d) {
                      var xLabel = d.datasets[t.datasetIndex].label;
                      var yLabel = t.yLabel &gt;= 1000 ?
                          '$' + t.yLabel.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",") :
                          '$' + t.yLabel;
                      return xLabel + ': ' + yLabel;
                  }
              }
          }
      }
  });
  </code></pre>