JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.4/Chart.js"></script>
<canvas id="myChart" style="width:400px; height:400px;"></canvas>

JavaScript

var

// Element
ctx = document.getElementById("myChart"),

// Data
data = { 
	labels: ['First', 'Second', 'Third', 'Fourth'], 
	datasets: [ {
  	label:'Sample',
		data:[2982, 1039, 3200, 2300], 
    backgroundColor: "rgba(90, 150, 220, 0.85)", 
    borderColor: "rgba(70, 120, 180, 1)", borderWidth: 2 } ],
},

// Options
options = {
	// here my first try using string pattern
	//scaleLabel:"<%= datasetLabel %> - <%= value.toLocaleString() %>",
  // then changed to this, but still....
  scaleLabel: function (valuePayload) {
      return Number(valuePayload.value).toFixed(2).replace('.',',') + '$';
  }
};

// And I even put it on default options
//Chart.defaults.global.scaleLabel= function(label) {
//  return label.value.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
//};

//Chart.defaults.global.scaleLabel= "<%= datasetLabel %> - <%= value.toLocaleString() %>";

chart_trans_hari = new Chart( ctx, { type: 'bar', data: data, options: options });