Number value format with comma and two decimal points

Question

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;
         }
        }
    }]
}

Is 'Average Sales (with format) 1,000.2,017' actually what you want? That's not a valid number format. — Poul Bak, Sep 03 '18 at 01:15

azrahel · Accepted Answer · 2018-09-03T01:49:17.337

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.

Number.parseFloat(number).toFixed(2).replace(/[.]/, ",")); is working but there is no comma I need to have a comma and decimal point like **1,000.00** — loot verge, Sep 03 '18 at 01:23
Just to be clear the output of Number.parseFloat(number).toFixed(2).replace(/[.]/, ",")); is **1000.00** what I need is **1,000.00** — loot verge, Sep 03 '18 at 01:27
Actually it s not, cause `.replace(/[.]/, ","));` will replace dot with comma. I misunderstood you at the beginning. Is my answer OK now? — azrahel, Sep 03 '18 at 01:43

Poul Bak · Answer 2 · 2018-09-03T01:18:13.877

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.

edited Sep 03 '18 at 01:18

answered Sep 03 '18 at 00:53

Poul Bak

10,450
5
32
57

What browser are you using, not all browsers support toLocaleString with parameters (Edge does). – Poul Bak Sep 03 '18 at 01:08
I am using chrome – loot verge Sep 03 '18 at 01:14
3

it wont work, cause `minimum` should be replaced with `maximum` in this answer – azrahel Sep 03 '18 at 01:15
1

please upvote my comment and/or answer since it helped :) – azrahel Sep 03 '18 at 01:21
All these answers do not work if the value has only 1 decimal place. e.g. 1.1. output should be 1.10 – chitgoks Jun 18 '22 at 06:36

daCoda · Answer 3 · 2019-09-18T23:41:56.237

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 });
}

edited Sep 18 '19 at 23:41

answered Sep 18 '19 at 22:00

daCoda

3,583
5
33
38

Number value format with comma and two decimal points

3 Answers3