How to make money format in chart js in javascript

Question

Above is my data in a chart bar using javascript, I didn't have any idea how to format the money like: "11,372,626" in the labels.

This below is how to show the data in the chart bar.

$scope.listData = response.data.respone; //all of my Json Data
let myLabels = []; //For label
let myDataset = []; //for money label
for(let i = 0; i< $scope.listData.length; i++) {  //looping the datas
    myLabels.push($scope.listData[i].period);
    myDataset.push($scope.listData[i].sales);
}
var ctx = document.getElementById("myChart").getContext('2d');
var myChart = new Chart(ctx, {
    type: 'bar',
    data: {
        labels: myLabels,
        datasets: [{
            label: 'Sales Store',
            // data: [12, 19, 3, 5, 2, 3],
            data: myDataset,
            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)',
                '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)',
                'rgba(255, 159, 64, 1)',
                'rgba(255, 159, 64, 1)',
                'rgba(255, 159, 64, 1)',
                'rgba(255, 159, 64, 1)',
                'rgba(255, 159, 64, 1)',
                'rgba(255, 159, 64, 1)'
            ],
            borderWidth: 1
        }]
    },
    options: {
        scales: {
            yAxes: [{
                ticks: {
                    beginAtZero:false
                }
            }]
        }
    }
});

The data is coming from an API in json format, how to format the money data so it can be shown in the labels?

Xesenix · Answer 1 · 2019-07-05T07:27:15.753

0

You can try this:

const formatter = new Intl.NumberFormat('en-US', {
  style: 'currency',
  currency: 'USD',
});
...
options: {
  tooltips: {
    callbacks: {
      label: function(tooltipItem, data) {
        return formatter.format(tooltipItem.yLabel);
      },
    },
  },
},

example

edited Jul 05 '19 at 07:27

answered Jul 05 '19 at 07:16

Xesenix

2,418
15
30

If you need different formatting solution refer to https://stackoverflow.com/questions/149055/how-can-i-format-numbers-as-currency-string-in-javascript – Xesenix Jul 05 '19 at 07:46

How to make money format in chart js in javascript

1 Answers1