I am using chart.js to display my sales the problem is I cannot convert the data into a number format with comma and two decimal places properly.

When the data is a whole number the output is correct. However, when I display the average sales I am getting a output like

Average Sales (no format) 1000.2017
Average Sales (with format) 1,000.2,017
Total Sales (no format) 1000
Total Sales (with format) 1,000

How can format the out put correctly in javascript?

tooltips: {
  callbacks: {
     label: function(tooltipItem, data) {
         var value = data.datasets[0].data[tooltipItem.index];
         value = value.toString();
         value = value.replace(/\B(?=(\d{3})+(?!\d))/g, ",");
              return value;
           }
       }
  },
   scales: {
     yAxes: [{
       ticks: {
         userCallback: function(value, index, values) {
           value = value.toString();
           value = value.replace(/\B(?=(\d{3})+(?!\d))/g, ",");
              return value;
         }
        }
    }]
}

I am using chart.js to display my sales the problem is I cannot convert the data into a number format with comma and two decimal places properly.

When the data is a whole number the output is correct. However, when I display the average sales I am getting a output like

Average Sales (no format) 1000.2017
Average Sales (with format) 1,000.2,017
Total Sales (no format) 1000
Total Sales (with format) 1,000

How can format the out put correctly in javascript?

tooltips: {
  callbacks: {
     label: function(tooltipItem, data) {
         var value = data.datasets[0].data[tooltipItem.index];
         value = value.toString();
         value = value.replace(/\B(?=(\d{3})+(?!\d))/g, ",");
              return value;
           }
       }
  },
   scales: {
     yAxes: [{
       ticks: {
         userCallback: function(value, index, values) {
           value = value.toString();
           value = value.replace(/\B(?=(\d{3})+(?!\d))/g, ",");
              return value;
         }
        }
    }]
}

• javascript
• chart.js
• number-formatting

• Is '1000.2017' one number or two? – Poul Bak Commented Sep 3, 2018 at 0:44
• Is 'Average Sales (with format) 1,000.2,017' actually what you want? That's not a valid number format. – Poul Bak Commented Sep 3, 2018 at 1:15
• no that is the output of my code I want to fix the format – loot verge Commented Sep 3, 2018 at 1:16

3 Answers 3

Javascript offers you few solutions to do that. First two coming to mind below.

1. number.toLocaleString

As already mentioned, .toLocaleString can help you, but instead of minimumFractionDigits use maximumFractionDigits.

Like below:

number.toLocaleString(undefined, { maximumFractionDigits: 2 })

So summarizing:

const decimalsFormated = number.toLocaleString(undefined, { maximumFractionDigits: 2 })

And than

const finalFormated = String(decimalsFormated).replace(/\B(?=(\d{3})+(?!\d))/g, ",");

2. Number.parseFloat + toFixed

let number = 123.1234
Number.parseFloat(number).toFixed(2);

In each approach, wrap your solution in function preferably:

function getCommaSeparatedTwoDecimalsNumber(number) {
    const fixedNumber = Number.parseFloat(number).toFixed(2);
    return String(fixedNumber).replace(/\B(?=(\d{3})+(?!\d))/g, ",");

}

You could also use regex. I would say it is overaly complicated though.

Also very important thing to notice is that you may or may not want to round your final outcome.

Using toLocaleString with maxDigits will just remove everything after those two digits. Using toFixed will round your output unproperly.

This solution will round it properly:

Number(Math.round(1.005+'e2')+'e-2').toFixed(2);

Pasted from here: Format number to always show 2 decimal places

Last thing, probably most important. Depending on what format input number will have, above solution may or may not work. You need to decide on input format and if that cant be foreseen, provide formaters for each possibility:

1000000.123124

10000123123

100000,1239

1.12039

1,19012

etc.

And depending on format, order of actions you need to take may vary.

You can try using toLocaleString like this:

value = value.toLocaleString(undefined, { maximumFractionDigits: 2 });

It will format the number according to your locale with thousand separators and 2 digits after comma.

What you are looking for:

• Commas
• 2 decimal points no matter the number.

Here is your function:

function get4DecimalPointsWithCommas(amount) {
  return amount.toLocaleString(undefined, {
    maximumFractionDigits: 4,
    minimumFractionDigits: 4
  });
}
console.log(get4DecimalPointsWithCommas(33))