> ## Documentation Index
> Fetch the complete documentation index at: https://docs.graphy.dev/llms.txt
> Use this file to discover all available pages before exploring further.

# Formatting & locale

The renderer turns raw values into display text — numbers, dates and currencies — locale-aware. The engine emits raw values; formatting happens here, at paint time.

## Two locales

Two locales are in play:

* **Parsing locale** — how ambiguous *input* is interpreted (is `01/02/2024` Jan 2 or Feb 1?). Set on the data via [`data._metadata.parsingLocale`](/sdk-next/data-structure#schema); defaults to `en-GB`.
* **Formatting locale** — how *output* is displayed (separators, month names, currency symbols). Set with the `formattingLocale` prop on `GraphProvider`.

When you don't set `formattingLocale`, display falls back to the parsing locale.

```tsx theme={null}
<GraphProvider spec={spec} data={data} formattingLocale="en-US">
  <GraphRenderer />
</GraphProvider>
```

## Supported locales

`en-GB`, `en-US`, `ar`, `pt-PT`.

```tsx theme={null}
import type { Locale } from '@graphysdk/viz-engine';
```

## What a locale drives

The resolved locale — `formattingLocale ?? parsingLocale` — reaches two separate layers:

* **Value formatting** — numbers, dates and currency symbols in axis labels, tooltips, data labels and headline numbers.
* **UI strings** — the renderer's own phrases, such as the headline's comparison wording. Translations ship for `en-GB`, `en-US`, `ar` and `pt-PT`.

Two independent fallbacks apply to the strings. A locale outside the supported set resolves to `en-GB` as a whole, and within a resolved locale a phrase with no translation falls back to the `en-GB` wording for that phrase alone.

<Note>
  Dates render in **UTC**, always. A host in UTC+13 reading a timestamp near
  midnight sees the UTC calendar day, not the local one — pre-shift timestamps
  in your data if you need local days.
</Note>

The `duration` value format is always English, whatever the locale.

## Number formatting

Locale governs separators and symbols; the [`numberFormat` config](/sdk-next/config/number-format) governs the rest, and can override the locale's separators when you need to:

<ParamField path="decimals" type="number | 'auto'" default="auto">
  Fixed decimal places, or `'auto'` to choose from the value's magnitude.
</ParamField>

<ParamField path="abbreviation" type="'auto' | 'k' | 'm' | 'b' | 'none'">
  `'auto'` abbreviates from magnitude (1234567 → `1.2M`); `'k'`, `'m'` and `'b'`
  force a unit; `'none'` writes the number in full.
</ParamField>

<ParamField path="thousandsSeparator" type="string">
  Overrides the locale's grouping separator.
</ParamField>

<ParamField path="decimalSeparator" type="string">
  Overrides the locale's decimal separator.
</ParamField>

```tsx theme={null}
config({
  numberFormat: { decimals: 0, abbreviation: 'auto' },
});
```

## Currencies and dates

Currency and date columns detected during [value-format inference](/sdk-next/data-structure#value-format-detection) are formatted for the active locale automatically — a `£1,250` column renders with the right symbol and grouping, a date axis with locale-appropriate month names — without extra configuration.

## Related

* [Number format](/sdk-next/config/number-format) — the `numberFormat` options in full
* [Data structure](/sdk-next/data-structure) — parsing locale and value formats


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.