[Chartjs]-Number value format with comma and two decimal points

13👍

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.

1👍

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.

0👍

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, minimumFractionDicits: 4 });
}

Leave a comment