How to make custom thousand separator and decimal character in D3.js in Version 5.7.0

Question

I am trying to add a custom thousand separator and decimal character in D3.js I followed below link but that solution is for version 3.4.11 but I am looking to make it for version 5.7.0: How to add a (custom) thousand separator in D3?

Below is the code:

// custom localization options
var myLocale = {
  "decimal": ",",
  "thousands": ".",
  "grouping": [3],
  "currency": ["$", ""]

}

// create custom locale formatter from the given locale options
const localeFormatter = d3.locale(myLocale);

const formater = ",.2f";
// create a formatter for the number (grouped thousands with two significant digits). By default ',' means 'thousands' but we switched that into a '.' in our custom localization
const numberFormat = localeFormatter.numberFormat(formater);

// test
//alert(numberFormat(10235.6789)); // "1.000.000"
//$("#number").html(numberFormat(10235.6789))
document.getElementById('number').innerHTML = numberFormat(10235.6789)

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
<p id="number">

</p>

https://stackoverflow.com/a/42068175/367865 – Ouroborus May 31 '21 at 15:57 — Ouroborus, May 31 '21 at 15:57

Andrew Reid · Answer 1 · 2021-06-01T17:09:36.717

d3.locale is now d3.formatLocale:

const localeFormatter = d3.formatLocale(myLocale);

While we can create a format with:

const numberFormat = localeFormatter.format(formater);

As opposed to localeFormatter.numberFormat(formater);

// custom localization options
var myLocale = {
  "decimal": ",",
  "thousands": ".",
  "grouping": [3],
  "currency": ["$", ""],

}

// create custom locale formatter from the given locale options
const localeFormatter = d3.formatLocale(myLocale);

const formater = ",.2f";
// create a formatter for the number (grouped thousands with two significant digits). By default ',' means 'thousands' but we switched that into a '.' in our custom localization
const numberFormat = localeFormatter.format(formater);

// test
//alert(numberFormat(10235.6789)); // "1.000.000"
//$("#number").html(numberFormat(10235.6789))
document.getElementById('number').innerHTML = numberFormat(10235.6789)

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
<p id="number">

</p>

The custom locale can also be used like d3.formatPrefix to allow use of a SI prefix and specification of how many decimal points should be used :

// custom localization options
var myLocale = {
  "decimal": ",",
  "thousands": ".",
  "grouping": [3],
  "currency": ["$", ""],

}

// create custom locale formatter from the given locale options
const localeFormatter = d3.formatLocale(myLocale);

// custom number format:
const numberFormat = n=>localeFormatter.formatPrefix(".2", n)(n);

// test
//alert(numberFormat(10235.6789)); // "1.000.000"
//$("#number").html(numberFormat(10235.6789))
document.getElementById('number').innerHTML = numberFormat(10010000235.6789)

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
<p id="number">

</p>

Is that above code work for the custom number formatting also like €10.5k , €25.67M, €32.56B etc? — Amit kumar Sah, May 31 '21 at 17:20
You require a different approach (custom locale or not) to do both dynamic precision and SI units, see [here](https://stackoverflow.com/q/55608134/7106086) — Andrew Reid, May 31 '21 at 18:05
(You can use `localeFormatter.formatPrefix` as d3.formatPrefix is used in the linked answer) — Andrew Reid, May 31 '21 at 20:35
localeFormatter.formatPrefix will not give the desired output like in K, million, billion etc. I checked the [Link](https://devdocs.io/d3~5/d3-format#locale_formatPrefix) where it I can see k represent kilo, M represent Mega. Is that correct number formatting? Also there is no "B" SI prefix available. — Amit kumar Sah, Jun 01 '21 at 05:21
There is no SI prefix B - but use of different prefixes could be the basis for a separate question. The link shows correct SI prefixes as far as I'm aware, though I could see the case additional options, such as B for billion (as opposed to G for giga) and terms such as lakh, crore, or even myriad, milliard, score, etc. Updated the answer with a use of SI prefixing, to make it cleaner, nested the formatter in a function. But localization options for prefixes are likely best addressed in a new question. — Andrew Reid, Jun 01 '21 at 17:18

How to make custom thousand separator and decimal character in D3.js in Version 5.7.0

1 Answers1