Skip to main content

Value Formatting

The easiest way to format numbers and dates in Evidence is through component props. You can pass in any of the following:

For example, you can use the fmt prop to format values inside a Value component:

<Value data={sales_data} column=sales fmt='$#,##0' />

Within charts, you can format individual columns using xFmt and yFmt (and sizeFmt for bubble charts):

<LineChart 
data={sales_data}
x=date
y=sales
xFmt="m/d"
yFmt="eur"
/>

In the example above, xFmt is passing in an Excel-style code to format the dates and yFmt is referencing a built-in format (see the full list of supported tags below, or create your own).

Date formatting

Formatting does not apply to the date axis of a chart. For example, if you set xFmt to m/d/yy, you will only see that formatting reflected in your chart tooltips and annotations. This is to ensure that the chart axis labels have the correct spacing.

Reusable Formats

For a more reusable approach, you can use SQL format tags, which let you define formats within your SQL. This guarantees that your columns will be formatted in the same way wherever they are used in Evidence.

You can also create your own custom formats, which are format codes you can reuse across your project.

Formatting Directly in Markdown

If you need to format values outside of components, the format function can be used directly. For example, when using expressions it is not possible to use component props or format tags.

Supported Formats

Excel Format Codes

Evidence supports Excel style custom format codes, which can be passed directly to a component prop, the format function, or saved as a custom format code that you want to reuse.

Including strings inside formats

To include a string inside an Excel-style format code, you need to use double-quotes to surround the string, and single-quotes to surround the format code. For example, in a chart you might use yFmt = '#,##0.00 "mpg"'

Built-in Formats

Evidence supports a variety of date/time, number, percentage, and currency formats. You can find the full list of formats below.

Auto-Formatting

Wherever you see auto listed beside a format, that means Evidence will automatically format your value based on the context it is in.

For example, Evidence automatically formats large numbers into shortened versions based on the size of the median number in a column (e.g., 4,000,000 4M).

You can choose to handle these numbers differently by choosing a specific format code. For example, if Evidence is formatting a column as millions, but you want to see all numbers in thousands, you could use the num0k format, which will show all numbers in the column in thousands with 0 decimal places.

Dates

Format NameFormat CodeExample InputExample Output
dddddd2022-01-09 12:45Sun
dddddddd2022-01-09 12:45Sunday
mmmmmm2022-01-09 12:45Jan
mmmmmmmm2022-01-09 12:45January
yyyyyyyy2022-01-09 12:452022
shortdatemmm d/yy2022-01-09 12:45Jan 9/22
longdatemmmm d, yyyy2022-01-09 12:45January 9, 2022
fulldatedddd mmmm d, yyyy2022-01-09 12:45Sunday January 9, 2022
mdym/d/y2022-01-09 12:451/9/22
dmyd/m/y2022-01-09 12:459/1/22
hmsH:MM:SS AM/PM2022-01-09 12:4511:45:03 AM

Currencies

Supported currencies:

CodeCurrency
USDUnited States Dollar
AUDAustralian Dollar
BRLBrazilian Real
CADCanadian Dollar
CNYRenminbi
EUREuro
GBPPound Sterling
JPYJapanese Yen
INRIndian Rupee
KRWSouth Korean won
NGNNigerian Naira
RUBRussian Ruble
SEKSwedish Krona

In order to use currency tags, use the currency code, optionally appended with:

  • a number indicating the number of decimal places to show (0-2)
  • a letter indication the order of magnitude to show ("","k", "m", "b")

For example, the available tags for USD are:

Format NameFormat CodeExample InputExample Output
usdauto412.17$412
usd0$#,##07043.123$7,043
usd1$#,##0.07043.123$7,043.1
usd2$#,##0.007043.123$7,043.12
usd0k$#,##0,"k"64301.12$64k
usd1k$#,##0.0,"k"64301.12$64.3k
usd2k$#,##0.00,"k"64301.12$64.30k
usd0m$#,##0,,"M"4564301.12$5M
usd1m$#,##0.0,,"M"4564301.12$4.6M
usd2m$#,##0.00,,"M"4564301.12$4.56M
usd0b$#,##0,,,"B"9784564301.12$10B
usd1b$#,##0.0,,,"B"9784564301.12$9.8B
usd2b$#,##0.00,,,"B"9784564301.12$9.78B

Numbers

Format NameFormat CodeExample InputExample Output
num0#,##011.2316811
num1#,##0.011.2316811.2
num2#,##0.0011.2316811.23
num3#,##0.00011.2316811.232
num4#,##0.000011.2316811.2317
num0k#,##0,"k"6420164k
num1k#,##0.0,"k"6420164.2k
num2k#,##0.00,"k"6420164.20k
num0m#,##0,,"M"4253948343M
num1m#,##0.0,,"M"4253948342.5M
num2m#,##0.00,,"M"4253948342.54M
num0b#,##0,,,"B"13849375841B
num1b#,##0.0,,,"B"13849375841.4B
num2b#,##0.00,,,"B"13849375841.38B
id0921594675921594675
fract# ?/?0.25 1/4
mult#,##0.0"x"5.325.3x
mult0#,##0"x"5.325x
mult1#,##0.0"x"5.325.3x
mult2#,##0.00"x"5.325.32x
sci0.00E+016546.15611.65E+4

Percentages

Format NameFormat CodeExample InputExample Output
pctauto0.73173.1%
pct0#,##0%0.73173%
pct1#,##0.0%0.73173.1%
pct2#,##0.00%0.73173.10%
pct3#,##0.000%0.73173.100%

Custom Formats

Custom formats can be added in the Value Formatting Section of the Evidence Settings.

With custom formats, you define the format you want to use (using Excel style custom format codes), and give the format a name (e.g., mydate). That format name will now be accessible in any place you can format your data in Evidence. For example:

<Value data={sales_data} column=date fmt=mydate />

SQL Format Tags

SQL format tags let you define formats for your columns within your SQL query. This ensures that columns are formatted in the same way wherever they are used.

A format tag is appended to your column name with an underscore: for example, to append the percentage format to a column named growth, it would be growth_pct.

Formatting can be configured in the Value Formatting Section of the Evidence Settings.

Format tags are case-insensitive, so growth_pct and GROWTH_PCT are equivalent.

Title Formatting

When creating a table, Evidence formats column titles based on the name of the column and its format tag. Format tags that do not add to the meaning of the column name are not printed as part of the title. All columns are printed with proper casing.

Examples

Column NameFormatted Title
sales_usdSales ($)
customer_idCustomer ID
growth_pctGrowth
customer_number_num2kCustomer Number

Format Function

The format function is used to format expressions within markdown. This is useful when you cannot use a component.

The syntax is:

{fmt(expression, formatCode)}

formatCode can be any one of the following:

  • An Excel-style format code (e.g., $#,##0.0)
  • A built-in Evidence format (e.g., eur)
  • A custom-defined format code (see section above on custom formats)

Example

In the below example, we return a value from a calculation. In this situtation we cannot use the Value component, which only accepts a single row. Instead we use the Format function to format the result.

```sql sales_per_year
select
date_part('year', order_datetime) AS year,
sum(sales) AS total_sales
from orders
group by year
order by year desc
```

Sales are {fmt(sales_per_year[0].total_sales - sales_per_year[1].total_sales, '+#,##0;-#,##0')} vs last year.