

Text

Text mark displays each data item as text.

{
  "data": { "url": "sincos.csv" },
  "mark": "text",
  "encoding": {
    "x": { "field": "x", "type": "quantitative" },
    "y": { "field": "sin", "type": "quantitative" },
    "text": { "field": "sin", "type": "quantitative", "format": ".2f" },
    "size": {
      "field": "x",
      "type": "quantitative",
      "scale": {
        "range": [6, 28]
      }
    }
  }
}

Channels

In addition to standard position channels and color and opacity channels, point mark has the following channels:

text

Type: String

The text to display. The format of numeric data can be customized with a format specifier as shown in the example above.

Default value: ""

size

Type: Number

The font size in pixels.

Default value: 11

Properties

align

Type: String

The horizontal alignment of the text. One of "left", "center", or "right".

Default value: "left"

baseline

Type: String

The vertical alignment of the text. One of "top", "middle", "bottom".

Default value: "bottom"

dX

Type: Number

Offset of the x coordinate in pixels. The offset is applied after the viewport scaling and translation.

Default value: 0

dY

Type: Number

Offset of the x coordinate in pixels. The offset is applied after the viewport scaling and translation.

Default value: 0

Examples

Ranged text

The x2 channel allows for positioning the text inside a segment. The text is hidden if it does not fit in the segment.

The example below has two layers: gray rectangles at the bottom and ranged text on the top.

{
  "data": {
    "values": ["A", "B", "C", "D", "E", "F", "G"]
  },
  "transform": [
    { "type": "formula", "expr": "random() * 100", "as": "a" },
    { "type": "formula", "expr": "datum.a + random() * 60", "as": "b" }
  ],
  "encoding": {
    "x": { "field": "a", "type": "quantitative" },
    "x2": { "field": "b" },
    "y": {
      "field": "data",
      "type": "nominal",
      "scale": {
        "padding": 0.3
      }
    }
  },
  "layer": [
    {
      "mark": "rect",
      "encoding": { "color": { "value": "#eaeaea" } }
    },
    {
      "mark": {
        "type": "text",
        "align": "center",
        "baseline": "middle"
      },
      "encoding": {
        "text": {
          "expr": "'Hello ' + floor(datum.a)",
          "type": "ordinal"
        },
        "size": { "value": 12 }
      }
    }
  ]
}