# Value formatters

You can determine how the values appear in the [Account Manager] tables by using the [`formatter`] property of [`AccountManagerColumnBase`].
If no `formatter` is set, values are displayed as they are, separated by spaces.
When a `formatter` is defined, it processes only the values specified in the `dataFields` property.
If `dataFields` is an empty array, the `formatter` will receive the entire [order]/[position] data object.

```js
// AccountManagerColumnBase object
{
    id: "limitPrice",
    label: "Limit Price",
    dataFields: ["limitPrice"],
    // highlight-next-line
    formatter: "formatPrice",   // Standard formatter that displays symbol's price
},
```

The `formatter` property can contain either `StandardFormatterName` or `FormatterName` object.

- `StandardFormatterName` refers to the [built-in formatters](#built-in-formatters).
- `FormatterName` is a general type that can be a built-in name or any other string corresponding to a [custom formatter](#custom-formatters).

## Formatter and dataFields dependency

The `formatter` property expects that the [`dataFields`] property has certain types of values defined in a specific order.
`dataFields` is an array of strings that match the property names in the [order]/[position] data object.
The values for these properties in the data object are expected to be a number, string, date, etc.
The mapping of the `formatter` and `dataFields` values is described in the [`StandardFormattersDependenciesMapping`] interface.

### Example

Assume that your data object has two custom fields: `balance` and `currency`.

```js
{
  // <...other object fields...>
  balance: 1000.00,
  currency: "EUR",
}
```

You want to display the user's balance in a column. The balance value should have two decimal places and a currency symbol.
For this purpose, you can use the built-in [`fixedInCurrency`](#fixedInCurrency) formatter that expects the following arguments:

1. A number that represents the price.
2. A string that represents the currency code.

This means that `dataFields` should have the values of the followings types: `[number, string]`.
Then, the `AccountManagerColumnBase` object for the balance column should look as follows:

```js
{
    id: "balance",
    label: "Balance",
    dataFields: ["balance", "currency"],
    formatter: "fixedInCurrency",
},
```

## Built-in formatters

The table below lists the built-in formatter values, expected types of the properties within `dataFields`,
and the default fields of the [order]/[position] data object.

## Custom formatters

You can implement your custom formatter using the [`customFormatters`] property in the [`AccountManagerInfo`] object.
Each custom formatter is an object with the following fields.

### Example

The CodePen example below implements two custom formatters that display the following:

- Dynamically changing text
- A button

These formatters are used to format values for custom columns of the *Positions* page.

See the Pen 
  Implementing custom formmaters for Account Manager columns by TradingView (@tradingview)
  on CodePen.

[Account Manager]: https://charting-library-docs.xstaging.tv/latest/trading_terminal/account-manager.md
[order]: https://charting-library-docs.xstaging.tv/latest/api/interfaces/Charting_Library.PlacedOrder
[position]: https://charting-library-docs.xstaging.tv/latest/api/interfaces/Charting_Library.Position

[`AccountManagerColumnBase`]: https://charting-library-docs.xstaging.tv/latest/api/interfaces/Charting_Library.AccountManagerColumnBase
[`accountManagerInfo`]: https://charting-library-docs.xstaging.tv/latest/api/interfaces/Charting_Library.IBrokerTerminal#accountmanagerinfo
[`customFormatters`]: https://charting-library-docs.xstaging.tv/latest/api/interfaces/Charting_Library.AccountManagerInfo#customformatters
[`dataFields`]: https://charting-library-docs.xstaging.tv/latest/api/interfaces/Charting_Library.AccountManagerColumnBase#datafields
[`formatter`]: https://charting-library-docs.xstaging.tv/latest/api/interfaces/Charting_Library.AccountManagerColumnBase#formatter
[`StandardFormattersDependenciesMapping`]: https://charting-library-docs.xstaging.tv/latest/api/interfaces/Charting_Library.StandardFormattersDependenciesMapping

---

## Sitemap

- [All documentation pages](https://charting-library-docs.xstaging.tv/llms.txt)
- [Full page map with headings](https://charting-library-docs.xstaging.tv/docs_map.md)