Thousands Separator in Counters

[JohnAlan]

Hi,

With the counters as used on https://www.okler.net/previews/porto/9.7.0/demo-one-page-agency.html, can a thousands separator (,) be used, so that it would end up as (e.g.): –

30,000+ SUPPORT HOURS
10+ YEARS IN BUSINESS
40,000+ HAPPY CLIENTS
7,000+ DEVELOPMENT HOURS

?

Thanks in advance,

John.

---

Template Version: 9.7.0

[Support]

Hello, you can find examples below:

<div class="row">
	<div class="col">
		<div class="row counters">
			<div class="col-sm-6 col-lg-3 mb-4 mb-lg-0">
				<div class="counter counter-primary">
					<strong data-to="70.13" data-plugin-options="{'decimals': 2}">0</strong>
					<label>Decimals</label>
				</div>
			</div>
			<div class="col-sm-6 col-lg-3 mb-4 mb-lg-0">
				<div class="counter counter-with-unit counter-primary">
					<strong>$</strong>
					<strong data-to="15">0</strong>
					<label>Currency</label>
				</div>
			</div>
			<div class="col-sm-6 col-lg-3 mb-4 mb-sm-0">
				<div class="counter counter-with-unit counter-primary">
					<strong data-to="78">0</strong>
					<strong>%</strong>
					<label>Percentual</label>
				</div>
			</div>
			<div class="col-sm-6 col-lg-3">
				<div class="counter counter-primary">
					<strong data-to="5000" data-append="+">0</strong>
					<label>Append Symbol</label>
				</div>
			</div>
		</div>
	</div>
</div>

Let me know if you need further assistance.

Kind Regards,

Jonas

---

[JohnAlan]

Thanks, but none of these examples add a thousands separator (comma) to format the number correctly (e.g. 5,000)?

---

[Support]

Hi,

Try with this code:

HTML:

<div class="row counters">
	<div class="col-sm-6 col-lg-3 mb-4 mb-lg-0">
		<div class="counter">
			<strong data-to="30000" data-plugin-options="{'millionFormat': true}">0</strong>
		</div>
	</div>
</div>

JS (js/custom.js):

$.extend(theme.PluginCounter.prototype, {
	build: function() {
		if (!($.isFunction($.fn.countTo))) {
			return this;
		}

		var self = this,
			$el = this.options.wrapper;

		$.extend(self.options, {
			onComplete: function() {
				if ($el.data('append')) {
					$el.html($el.html() + $el.data('append'));
				}

				if ($el.data('prepend')) {
					$el.html($el.data('prepend') + $el.html());
				}
			}
		});

		$el.appear(function() {

			if( self.options.millionFormat ) {
				$.extend(self.options, {
					formatter: function (value, options) {
					    value = value.toFixed(options.decimals);
					    value = value.replace(/\B(?=(\d{3})+(?!\d))/g, ',');
					    return value;
					}
				});
			}

			$el.countTo(self.options);

		}, {
			accX: self.options.accX,
			accY: self.options.accY
		});

		return this;
	}
});

Let me know if you need further assistance.

Best Regards,

Okler Themes

---

[JohnAlan]

Excellent, thanks again!

---

[Author]

Posts