Animated counter

Animated counter

Greetings,

How to make a jQuery script that show dots rather than commas in an animated counter? I created this  scholarship graphic using the code below. However, I want to make sure that the numbers display dots only.

Any good ideas on decimal separation here?


<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script>
const formatter = (Intl !== undefined)? new Intl.NumberFormat().format : (t) => t;
var a = 0;
$(window).scroll(function() {

var oTop = $('#counter').offset().top - window.innerHeight;
if (a == 0 && $(window).scrollTop() > oTop) {
$('.counter-value').each(function() {
var $this = $(this),
countTo = $this.attr('data-count');
$({
countNum: $this.text()
}).animate({
countNum: countTo
},
{
duration: 2000,
easing: 'swing',
step: function() {
$this.text(formatter(Math.floor(this.countNum)));
},
complete: function() {
$this.text(formatter(Number(this.countNum)));
}
});
});
a = 1;
}
});
</script>
<div id="counter">
<div class="sqs-col sqs-col-4 counter-value" data-count="162" data-desc="Online anbefalinger">0</div>
<div class="sqs-col sqs-col-4 counter-value" data-count="15039" data-desc="Legater i databasen">0</div>
<div class="sqs-col sqs-col-4 counter-value" data-count="6916682" data-desc="Legatsum til kunder">0</div>
</div>

<style>
.counter-value {
font-size: 60px;
line-height:2em;
text-align:center;
padding:17px 0;
}
.counter-value:after {
content: attr(data-desc);
display:block;
text-transform:uppercase;
font-size: 14px;
line-height:1.2em;
}
</style>