Format numbers so they fit their container and stay readable. Abbreviations (K, M, B), precision that adjusts to the space, and currency values with the symbol in the right place.
Basic Usage
To enable automatic value formatting, add the data-value-format="true"
attribute to your element.
data-value-type="number" is an accepted alias for
the same opt-in, and only the exact value number opts in.
The runtime selects both attributes in one pass, so an element carrying either one is
formatted the same way and honors the same companion attributes. The examples on this page use
data-value-format.
To add a delimiter to large numbers, for example 1234 => 1,234, see custom filters.
Currency Values
Values with currency symbols are automatically formatted while maintaining the symbol placement.
To add a currency symbol, for example 1234 => $1,234, see custom filters.
Supported currency symbols include:
$
US Dollar
€
Euro
£
British Pound
¥
Japanese Yen / Chinese Yuan
₴
Ukrainian Hryvnia
₹
Indian Rupee
₪
Israeli Shekel
₩
Korean Won
₫
Vietnamese Dong
₱
Philippine Peso
₽
Russian Ruble
₿
Bitcoin
Regional Number Formats
Numbers can be formatted according to different regional standards using the data-value-locale attribute.
Common locale options include:
en-US
United States (123,456.78)
de-DE
German (123.456,78)
fr-FR
French (123 456,78)
en-GB
British English (123,456.78)
ja-JP
Japanese (123,456.78)
If no locale is specified, numbers will be formatted using US format (en-US) by default.