Add comma separator for numbers in the Counter Widgets

AJSK11 · July 2014

Is there anyway to format the Counter Widgets so they show commas in the numbers such as 5,000 instead of 5000?

Albert · July 2014

We already answered on your question but we`ll re-paste this answer here as well

"Sorry but this is not possible. Counter works on math and is not able to count when have different symbols then only numbers."

AJSK11 · July 2014

If there anyway to format the outputted text at all? Seems like this would be useful to be able to have this as when you deal with larger numbers, it would be easier for viewers to read. Can you point me in the direction of the file where the calculations happen? I would like to see if there is someway to accomplish this.

-AJ

Albert · July 2014

In comments section on TF we sent you info inside which files you can have a look. If you will see, you understand this is standard math and there is nothing what you can do with that.

haveabyte · November 2023

You could add an option in the element configuration to "apply english formatting". Your counter/animation loop that iterates the number through the determined range could be filtered through code below that alters the output of the numbers before writing it to the html element containing it. The math would not be adversely affected because it's processing some original range of numbers to animate from X to Y, but you'd just apply the user-specified number format. The user would still need to enter like 2 and 180000 as the range, and you'd take care of the commas on the output.

If you can access the numbers from the animation loop in PHP, you'd use:

// english notation (default)
$english_format_number = number_format($number);
// 1,235

If you must access them in javascript, you'd use:

const number = 1234567.89;

// Using default formatting (based on users locale)
const formattedNumberDefault = number.toLocaleString();
console.log(formattedNumberDefault); // Output depends on user's locale

// Specifying a specific locale (e.g., en-US)
const formattedNumberUS = number.toLocaleString('en-US');
console.log(formattedNumberUS); // Output: "1,234,567.89"

// Specifying options for formatting
const options = {
  style: 'decimal',  // Other options: 'currency', 'percent', etc.
  minimumFractionDigits: 2,
  maximumFractionDigits: 2,
};
const formattedWithOptions = number.toLocaleString('en-US', options);
console.log(formattedWithOptions); // Output: "1,234,567.89"