# Formatting

{% embed url="<https://www.youtube.com/watch?v=5gzSrTq45vA>" %}

Whether you format a numeric field from the [table view](https://help.felt.com/layers/table-view), with [interactions](https://help.felt.com/layers/popup-interactions), or with a [component](https://help.felt.com/dashboards-and-apps/dashboard-components), 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

<figure><img src="https://217108486-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FmRfGitkyjOEMvVsEyGWN%2Fuploads%2Ft1MwGh2Vr57zUMErz8Ih%2Fformat%20number.png?alt=media&#x26;token=631746ab-476d-47a8-9a90-20de034e6a55" alt=""><figcaption></figcaption></figure>

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...**

<figure><img src="https://217108486-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FmRfGitkyjOEMvVsEyGWN%2Fuploads%2FDpb5cgr6C1G4yo98puUv%2FScreenshot%202025-03-01%20at%2012.23.30%E2%80%AFPM.png?alt=media&#x26;token=8ff25243-4d02-4c7a-ab80-1db558a9e486" alt="" width="321"><figcaption></figcaption></figure>

### Format from popup&#x20;

* Click **`123`** when hovering over a numeric attribute in the Popup content panel

<figure><img src="https://217108486-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FmRfGitkyjOEMvVsEyGWN%2Fuploads%2FLRjRjT2k75I2Jeq5uOLa%2FScreenshot%202025-03-01%20at%201.28.02%E2%80%AFPM.png?alt=media&#x26;token=09776752-40f6-4103-b394-a511a05dbf05" alt="" width="285"><figcaption></figcaption></figure>

### **Format from component**

* Select an option from **`Format`** in the component configuration panel

<figure><img src="https://217108486-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FmRfGitkyjOEMvVsEyGWN%2Fuploads%2FYdr7vALgBNZS4UxOK4UM%2FScreenshot%202025-03-01%20at%201.32.20%E2%80%AFPM.png?alt=media&#x26;token=1954a667-65df-4d75-822f-f0a73412de6e" alt="" width="280"><figcaption></figcaption></figure>

## 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

<figure><img src="https://217108486-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FmRfGitkyjOEMvVsEyGWN%2Fuploads%2FOSjywb1UsN6mn4TTnhQP%2FScreenshot%202025-03-01%20at%201.38.23%E2%80%AFPM.png?alt=media&#x26;token=ad3140c1-942f-4dbe-8121-f6e445484f8a" alt="" width="375"><figcaption></figcaption></figure>

* Enter your custom numbro.js formatting

<figure><img src="https://217108486-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FmRfGitkyjOEMvVsEyGWN%2Fuploads%2FZKxLCMNoMqdFfD6wmUDb%2FScreenshot%202025-03-01%20at%201.47.47%E2%80%AFPM.png?alt=media&#x26;token=96c116ed-82f6-4327-9d37-d440d1e53701" alt="" width="375"><figcaption></figcaption></figure>

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      |