---
product: "AG Studio"
title: "Formatting Values"
description: "Format numbers, currencies, percentages, dates and true/false values in AG Studio, including conditional formats, without changing the data."
framework: react
version: "3.1.0"
related:
    - title: "Data Panel"
      url: "https://www.ag-grid.com/studio/analysts/data-panel/"
    - title: "Fields in Widgets"
      url: "https://www.ag-grid.com/studio/analysts/fields-in-widgets/"
    - title: "Calculations"
      url: "https://www.ag-grid.com/studio/analysts/calculations/"
    - title: "Blanks and Missing Values"
      url: "https://www.ag-grid.com/studio/analysts/blanks-and-missing-values/"
llms: "https://www.ag-grid.com/studio/llms.txt"
---

# Formatting Values

A field's format controls how its values are displayed in Widgets, without changing the data.

Every field starts with a default format, such as Integer, Decimal or Date. If your developer has made a field editable, you can adjust that format or replace it with your own.

When a field plotted on a chart is formatted as a percentage, the chart's value axis shows percentages too, so it matches the tooltip. If several fields share an axis, the axis follows the first of them.

The example below applies the formats on this page to the values used to explain them. Each column is headed by its format string.

#### Format Strings

```ts
import {
  AgReportState,
  AgStudioApi,
  AgStudioProperties,
  createStudio,
  enableStudioDevValidations,
} from "ag-studio";
import {
  BASIC_FORMATS,
  BOOLEAN_FORMAT,
  DATE_FORMATS,
  SCALING_FORMATS,
  getData,
} from "./data.ts";

if (process.env.NODE_ENV !== "production") {
  // Enable extended validations only for development
  enableStudioDevValidations();
}

const initialState: AgReportState = {
  pages: [
    {
      id: "page1",
      widgets: {
        basic: {
          type: "grid",
          dataMapping: {
            cols: [
              { id: "basic.value" },
              ...BASIC_FORMATS.map((_, index) => ({ id: `basic.n${index}` })),
            ],
          },
          format: {
            title: {
              enabled: true,
              text: "Placeholders and Separators",
            },
          },
        },
        scaling: {
          type: "grid",
          dataMapping: {
            cols: [
              { id: "scaling.value" },
              ...SCALING_FORMATS.map((_, index) => ({
                id: `scaling.n${index}`,
              })),
            ],
          },
          format: {
            title: {
              enabled: true,
              text: "Scaling and Sections",
            },
          },
        },
        dates: {
          type: "grid",
          dataMapping: {
            cols: [
              { id: "dates.value" },
              ...DATE_FORMATS.map((_, index) => ({ id: `dates.d${index}` })),
            ],
          },
          format: {
            title: {
              enabled: true,
              text: "Date and Time Formats",
            },
          },
        },
        booleans: {
          type: "grid",
          dataMapping: {
            cols: [{ id: "booleans.value" }, { id: "booleans.b0" }],
          },
          format: {
            title: {
              enabled: true,
              text: `Boolean Format ${BOOLEAN_FORMAT}`,
            },
          },
        },
      },
      widgetLayout: {
        basic: { xTrack: 0, yTrack: 0, xSpan: 24, ySpan: 16 },
        scaling: { xTrack: 0, yTrack: 16, xSpan: 24, ySpan: 16 },
        dates: { xTrack: 0, yTrack: 32, xSpan: 24, ySpan: 8 },
        booleans: { xTrack: 0, yTrack: 40, xSpan: 10, ySpan: 9 },
      },
    },
  ],
  selectedPageId: "page1",
  panels: {
    filters: {
      collapsed: true,
    },
    data: {
      collapsed: true,
    },
    edit: {
      collapsed: true,
    },
  },
};

const studioProperties: AgStudioProperties = {
  mode: "edit",
  initialState,
  data: getData(),
};

let studioApi: AgStudioApi;

// setup Studio after the page has finished loading
const studioDiv = document.querySelector<HTMLElement>("#myStudio")!;
studioApi = createStudio(studioDiv, studioProperties);
```

[Live example: Format Strings](https://www.ag-grid.com/studio/examples/formatting-values/format-strings/typescript/)

## Format Selection

To change a field's format, select it in the Data Panel, then select **Edit** at the bottom of the Compose Panel. See [Editing Fields](https://www.ag-grid.com/studio/analysts/fields-in-widgets/#editing-fields) for which fields can be edited.

The **Format** list offers the field's own format and **Custom**:

- With the field's own format selected, the panel shows options for that format. Number formats offer settings such as **Decimal Places**, **Thousands Separator**, **Units** and **Negative Format**. Date formats offer a **Style** list. Boolean formats offer **True** and **False** text boxes.
- Choose **Custom** to type a format string into the **Custom Format** box. While the box is empty, it shows the field's default format as a hint.

The **Format Preview** shows how values will look. Select **Save** to apply the format, or **Cancel** to discard it.

For a calculation you created yourself, the **Format** list offers every format. Choosing **Custom** also shows a **Data Type** list, where you choose the type of value your expression returns. See [Calculations](https://www.ag-grid.com/studio/analysts/calculations/).

## Number Formats

A number format is built from digit placeholders, separators and symbols:

- `0` always shows a digit, padding with zeros where needed. `000` shows 7 as `007`.
- `#` shows a digit only when needed. `#.00` shows 0.5 as `.50`, while `0.00` shows `0.50`.
- `.` marks the decimal point. The number of placeholders after it sets the decimal places, and values are rounded to fit.
- `,` between placeholders adds a thousands separator.
- `%` multiplies the value by 100 and adds a percent sign.
- Text in double quotes, such as `"£"`, is shown exactly as typed.

Each example below shows a format and how it displays one value:

| Format | Value | Display |
| --- | --- | --- |
| `0` | 1234.5 | `1235` |
| `#,##0` | 1234.5 | `1,235` |
| `#,##0.00` | 1234.5 | `1,234.50` |
| `"£"#,##0.00` | 1234.5 | `£1,234.50` |
| `#,##0.0%` | 0.256 | `25.6%` |

> **Note**
>
> `%` multiplies the value by 100, so use it only for values stored as fractions, such as 0.25 for 25%. A value stored as 25 displays as `2,500%`.

### Thousands and Millions

A `,` at the end of the number part, with no placeholder after it, divides the value by 1,000, and two of them divide by 1,000,000. Add a label in double quotes to show the unit:

- `#,##0,"K"` shows 45,300 as `45K`.
- `#,##0.0,,"M"` shows 1,500,000 as `1.5M`.

The **Units** option on Integer, Decimal and Currency formats applies the same scaling without a format string.

## Positive, Negative and Zero Values

A format can have up to three sections separated by `;`. The first formats positive values, the second negative values and the third zero values:

```
#,##0;(#,##0);"-"
```

This format shows 1234 as `1,234`, -1234 as `(1,234)` and 0 as `-`. With only one section, negative values show a minus sign, such as `-1,234`.

## Conditional Formats

Put a condition in square brackets at the start of a section to control when that section applies. The first section whose condition matches the value is used. Conditions can use `>`, `>=`, `<`, `<=`, `=` and `<>`.

```
[>=1000000]#,##0.0,,"M";[>=1000]#,##0.0,"K";#,##0
```

This format shows 2,500,000 as `2.5M`, 45,000 as `45.0K` and 500 as `500`.

## Date and Time Formats

Date and time formats use letters for each part of the date:

- `yyyy` is the four-digit year and `yy` the two-digit year.
- `m`, `mm`, `mmm` and `mmmm` show the month as `3`, `03`, `Mar` and `March`.
- `d`, `dd`, `ddd` and `dddd` show the day as `5`, `05`, `Wed` and `Wednesday`.
- `qq` is the quarter and `ww` the week number.
- `h` or `hh` is the hour, `mm` the minutes and `ss` the seconds. `m` and `mm` mean minutes when they follow an hour or come before seconds.
- `am/pm` switches the hour to the 12-hour clock.

Each example below shows a format applied to 5 March 2025 at 14:07:09:

| Format | Display |
| --- | --- |
| `dd/mm/yyyy` | `05/03/2025` |
| `d mmm yyyy` | `5 Mar 2025` |
| `dddd d mmmm yyyy` | `Wednesday 5 March 2025` |
| `"Q"qq yyyy` | `Q1 2025` |
| `h:mm am/pm` | `2:07 PM` |
| `yyyy-mm-dd hh:mm` | `2025-03-05 14:07` |

Put words in double quotes, as with `"Q"` above, so that their letters are not read as parts of the date.

## Boolean Formats

Type the text to show for true and false values into the **True** and **False** boxes. To write the same thing as a format string, give two sections in double quotes, the first for true and the second for false:

```
"Yes";"No"
```

## Default Formats and Language

Default date and date-time formats follow your regional settings, so the same date can display as `31/12/2025` or `12/31/2025`.

Month and day names, AM and PM, and the default True and False text appear in the language your developer has set for AG Studio. Your developer can also change the default format for any field.