Value Formatting

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

• Excel-style format codes (e.g., fmt='$#,##0.0')
• Evidence's built-in formats (e.g., fmt=usd2k)
• Custom defined formats

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

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.

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.

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

Currencies

Supported currencies:

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:

Numbers

The default number format (when no fmt is specified) automatically handles decimal places and summary units (in the same way that usd does for currency).

Percentages

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

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