Formatting
Format attribute values for improved map readability.
Whether you format a numeric field from the table view, with interactions, or with a component, 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
123when hovering over a numeric attribute in the Popup content panel
Format from component
Select an option from
Formatin the component configuration panel
Custom formatting
Felt uses numbro.js 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 and code examples.
Numbers
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
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.
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
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
25
{ "output": "time" }
0:00:25
238
{ "output": "time" }
0:03:58
63846
{ "output": "time" }
17:44:06
Bytes
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
Last updated
Was this helpful?