Format

Edit this page

In Vega-Lite specifications you can customize the format of text marks, tooltips, axis, legend, header labels.

The text field definition as well as definitions of axis, legend, header labels include the following properties:

Property Type Description

format

String

Property	Type	Description
format	String	The text formatting pattern for labels of guides (axes, legends, headers) and text marks. If the format type is `"number"` (e.g., for quantitative fields), this is D3’s number format pattern. If the format type is `"time"` (e.g., for temporal fields), this is D3’s time format pattern. See the format documentation for more examples. Default value: Derived from numberFormat config for number format and from timeFormat config for time format.
formatType	String	The format type for labels (`"number"` or `"time"`). Default value: `"time"` for temporal fields and ordinal and nomimal fields with `timeUnit`. `"number"` for quantitative fields as well as ordinal and nomimal fields without `timeUnit`.

The text formatting pattern for labels of guides (axes, legends, headers) and text marks.

If the format type is "number" (e.g., for quantitative fields), this is D3’s number format pattern.
If the format type is "time" (e.g., for temporal fields), this is D3’s time format pattern.

See the format documentation for more examples.

Default value: Derived from numberFormat config for number format and from timeFormat config for time format.

formatType

String

The format type for labels ("number" or "time").

Default value:

"time" for temporal fields and ordinal and nomimal fields with timeUnit.
"number" for quantitative fields as well as ordinal and nomimal fields without timeUnit.

In addition, you can override the default formats in the config.

Formatting Text Marks and Tooltips

// A Single View or a Layer Specification
{
  ...,
  "mark/layer": ...
  "encoding": {
    ...,
    "text": {
      "field": ...,
      "type": ...,
      "format": ...,   // Format
      "formatType": ...,
      ...
    },
    ...
  }
}

Text marks and tooltips are formatted by setting the format property of text or tooltip channel definitions.

For example, we can use Vega-Lite to show the average horsepower for cars from different origins. To format the number to have 2 digits of precisions, we can use the format .2f.

Formatting tooltips or dates is done similarly.

Formatting Axis, Legend, and Header Labels

// A Single View or a Layer Specification
{
  ...,
  "mark/layer": ...,
  "encoding": {
    ...: {
      "field": ...,
      "type": ...,
      "axis/legend/header": {                // Axis / Legend / Header
        "format": ...,
        "formatType": ...,
        ...
      },
      ...
    },
    ...
  }
}

Quantitative Fields

Below, we override the default number formatting to use exponent notation set to two significant digits.

Temporal Data

In the example below we format the axis label to only show the year.

The format can also contain text.