Formatting
Format attribute values for improved map readability.
Last updated
Was this helpful?
Format attribute values for improved map readability.
Last updated
Was this helpful?
Whether you format a numeric field from the , with , or with a , 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.
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.
Click on a column name and choose the option to Format...
Click 123 when hovering over a numeric attribute in the Popup content panel
Select an option from Format in the component configuration panel
From the Format drop-down choose Custom
Enter your custom numbro.js formatting
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
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
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 %
25
{ "output": "time" }
0:00:25
238
{ "output": "time" }
0:03:58
63846
{ "output": "time" }
17:44:06
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
Felt uses to enable custom formatting of numeric attributes.
Refer to the examples below to get started with custom formatting. For a more detailed overview of options, visit their and .
