Search code examples
javascriptchart.jsnumber-formatting

Number value format with comma and two decimal points


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

Solution

  • 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.