# Formatting {% embed url="" %} Whether you format a numeric field from the [table view](/layers/table-view.md), with [interactions](/layers/popup-interactions.md), or with a [component](/dashboards-and-apps/components.md), your formatting choices are automatically synchronized across all three locations ensuring consistent data presentation throughout your map. This unified formatting approach not only makes it easier to view and understand your data, but also gives your final map with components or interactions a polished, professional appearance. ## Format options
Number, percent, and custom formats provide different ways to display your numeric data * **Number**: Displays values as standard numbers (e.g., 1234.56) * **Percent**: Converts values to percentages and adds the % symbol (e.g., 12.3%) * **Custom**: Allows for specialized formatting using numbro.js Further customize with * **Decimal places**: Controls how many digits appear after the decimal point * **Units**: Add prefix or suffix text to your numbers (e.g., $100 or 50 km) * **Thousand separators**: Inserts commas between thousands for improved readability (e.g., 34,500) * **Round Large Values**: Simplifies large numbers into abbreviated forms (e.g., 1.2M) The **Preview** section of the modal updates to show how the formatted numbers will look as you make your selections. ### Format from table view * Click on a column name and choose the option to **Format...**
### Format from popup * Click **`123`** when hovering over a numeric attribute in the Popup content panel
### **Format from component** * Select an option from **`Format`** in the component configuration panel
## Custom formatting Felt uses [numbro.js](https://numbrojs.com/index.html) to enable custom formatting of numeric attributes. * From the Format drop-down choose Custom
* Enter your custom numbro.js formatting
Refer to the examples below to get started with custom formatting. For a more detailed overview of options, visit their [documentation](https://numbrojs.com/format.html) and [code examples](https://github.com/BenjaminVanRyseghem/numbro/blob/master/src/validating.js). ### Numbers | Input Value | Format | Output Display | | ----------- | ----------------------------------------------------------------------- | -------------- | | 10000 | { "thousandSeparated": true, "mantissa": 4 } | 10,000.0000 | | 10000.23 | { "thousandSeparated": true } | 10,000.23 | | 10000.23 | { "thousandSeparated": true, "forceSign": true } | +10,000.23 | | -10000 | { "thousandSeparated": true, "mantissa": 1 } | -10,000.0 | | 10000.1234 | { "mantissa": 3 } | 10000.123 | | 10000.1234 | { "optionalMantissa": true, "mantissa": 5 } | 10000.12340 | | 1.23 | { "trimMantissa": true, "mantissa": 4 } | 1.23 | | 1.234 | { "trimMantissa": true, "mantissa": 4 } | 1.234 | | 1.2345 | { "trimMantissa": true, "mantissa": 4 } | 1.2345 | | 1.23456 | { "trimMantissa": true, "mantissa": 4 } | 1.2346 | | -10000 | { "thousandSeparated": true, "negative": "parenthesis", "mantissa": 4 } | (10,000.0000) | | -0.23 | { "mantissa": 2 } | -0.23 | | -0.23 | { "negative": "parenthesis", "mantissa": 2 } | (0.23) | | 0.23 | { "mantissa": 5 } | 0.23000 | | 1230974 | { "average": true, "mantissa": 1} | 1.2m | | 1460 | { "spaceSeparated": true, "average": true } | 1 k | | 1 | { "output": "ordinal" } | 1st | | 23 | { "output": "ordinal" } | 23rd | | 52 | { "output": "ordinal" } | 52nd | | 100 | { "output": "ordinal" } | 100th | ### Average numbro provides an easy mechanism to round up any number with the key **`average`** | Input Value | Format | Output Display | | ----------- | ------------------------------------------ | -------------- | | 123 | { "average": true } | 123 | | 1234 | { "average": true } | 1k | | 12345 | { "average": true } | 12k | | 123456 | { "average": true } | 123k | | 1234567 | { "average": true } | 1m | | 12345678 | { "average": true } | 12m | | 123456789 | { "average": true } | 123m | | 1b | { "average": true, "lowPrecision": false } | 580m | In addition to this, when numbers are rounded up, one can specify the precision wanted with the key **`totalLength`**. | Input Value | Format | Output Display | | ----------- | -------------------------------------- | -------------- | | 1234567891 | { "average": true } | 1b | | 1234567891 | { "average": true, "totalLength": 1 } | 1b | | 1234567891 | { "average": true, "totalLength": 2 } | 1.2b | | 1234567891 | { "average": true, "totalLength": 3 } | 1.23b | | 1234567891 | { "average": true, "totalLength": 4 } | 1.235b | | 1234567891 | { "average": true, "totalLength": 5 } | 1.2346b | | 1234567891 | { "average": true, "totalLength": 6 } | 1.23457b | | 1234567891 | { "average": true, "totalLength": 7 } | 1.234568b | | 1234567891 | { "average": true, "totalLength": 8 } | 1.2345679b | | 1234567891 | { "average": true, "totalLength": 9 } | 1.23456789b | | 1234567891 | { "average": true, "totalLength": 10 } | 1.234567891b | ### Percentages | Input Value | Format | Output Display | | ----------- | ----------------------------------------------------------------------------------------- | -------------- | | 1 | { "output": "percent" } | 100% | | 0.974878234 | { "output": "percent", "mantissa": 4 } | 97.4878% | | -0.43 | { "output": "percent", "spaceSeparated": true } | -43 % | | 0.43 | { "output": "percent", "mantissa": 3, "negative": "parenthesis", "spaceSeparated": true } | 43.000 % | ### Time | Input Value | Format | Output Display | | ----------- | -------------------- | -------------- | | 25 | { "output": "time" } | 0:00:25 | | 238 | { "output": "time" } | 0:03:58 | | 63846 | { "output": "time" } | 17:44:06 | ### Bytes | Input Value | Format | Output Display | | ------------- | ----------------------------------------------------------------------------- | -------------- | | 100 | { "output": "byte", "base": "binary" } | 100B | | 2048 | { "output": "byte", "base": "binary", "spaceSeparated": true } | 2 KiB | | 7884486213 | { "output": "byte", "base": "binary", "mantissa": 1 } | 7.3GiB | | 3467479682787 | { "output": "byte", "base": "binary", "mantissa": 3, "spaceSeparated": true } | 3.154 TiB | --- # Agent Instructions: Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://help.felt.com/layers/formatting.md?ask= ``` The question should be specific, self-contained, and written in natural language. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.