0

I would like to be able to change the numbers into dollars with commas. For example, 10000 into $10,000.

I would like this for 1) the tooltip numbers and 2) xAxis values.

Here are links to the graph thus far:

https://codepen.io/JamesDraper/pen/PXgLre or https://syncfiddle.net/fiddle/-LWPx0qe1VWChvodRlGC

Edit: I have updated the links with the code suggested by users.

This graph is quite large and it contains about 50 hours of legal research.

var myChart = new Chart(ctx, {
          type: 'horizontalBar',
          data: {
            labels: years,
            datasets: [
              {
                data: number,
                label: "Amount of Compensation",
                fill: true,
                backgroundColor: 'rgba(83, 19, 30, 1)',
              },
            ]
          },
          options: {
            scales: {
                yAxes: [{
                    ticks: {
                        fontSize: 9,
                      }
                    }],
                xAxes: [{
                   ticks: {
                       // Include a dollar sign in the ticks
                       callback: function(value, index, values) {
                           return '$' + value;
                       }
                   },
               }],
            }
        },
    });
JamesDraper
  • 1
  • 1

1 Answers1

4

You could use the format method of JS like this:

const amount = 10000;
const options2 = { style: 'currency', currency: 'USD' };
const numberFormat2 = new Intl.NumberFormat('en-US', options2);

console.log(numberFormat2.format(amount));
// expected output: "$10,000"

Here are docs about this

Here my guide to update, you only declare 2 variable in global

const options2 = { style: 'currency', currency: 'USD', minimumFractionDigits: 0 };
const numberFormat2 = new Intl.NumberFormat('en-US', options2);

And replace `return '$' + value by this:

return numberFormat2.format(value.toFixed(0).replace(/\.0+$/, ""));
phuocding
  • 345
  • 1
  • 4
  • 10