I'm using carto.js v4 to build my map. The legend I've put together displays some of the data as numbers next to value scaled markers As example I have:

    document.getElementById('gasDistmax').innerHTML = `
      <div class="gasDistCircle circle-outline" style="width:20px; height:20px;"></div> <p>${metadata.getMax()}<br />(MCF)</p>

The ${metadata.getMax()} gives me 585457. I would like to present that number as 585,457. It would be preferable to not change the actual column format in the db or add an extra column formatted as a string.

Is there a javascript way to do this, either within the carto library or one of the js.min libraries?

I've been building this from various online examples but have yet to find anything to reformat the numbers.


If adding additional libraries is an issue, you can use Intl, the Internationalization API, almost all modern browsers support it.

var number = 123456.789;
var formatter = new Intl.NumberFormat('en-EN',{ useGrouping: true, maximumFractionDigits:0})
//output: "123,456"
| improve this answer | |
  • Jorge Sanz's suggestion worked great! I would imagine that Ivan's would have as well but it's nice to not need a library and browser support is pretty comprehensive, at least for my user base. – Chris Coffin Jul 23 '18 at 15:51
  • Great, btw Ivan and I are coworkers at CARTO ^__^ – Jorge Sanz Jul 24 '18 at 17:08

You can use a library to do that.

For instance, the example on numeral.js function format is exactly what you're looking for.

var string = numeral(1000).format('0,0');
// '1,000'
| improve this answer | |

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.