View Title

Edit this page

The title property of a view specification in Vega-Lite adds a descriptive title to a chart. The title property can be either a string or an object defining the title properties.

For example, the following bar chart is titled “A Simple Bar Chart”.

Title Properties Object

A title properties object can contain the following properties:

Property Type Description
text Text | ExprRef

Required. The title text.
align String

Horizontal text alignment for title text. One of "left", "center", or "right".
anchor Null | String

The anchor position for placing the title. One of "start", "middle", or "end". For example, with an orientation of top these anchor positions map to a left-, center-, or right-aligned title.

Default value: "middle" for single and layered views. "start" for other composite views.

Note: For now, anchor is only customizable only for single and layered views. For other composite views, anchor is always "start".
angle Number | ExprRef

Angle in degrees of title and subtitle text.
baseline String

Vertical text baseline for title and subtitle text. One of "alphabetic" (default), "top", "middle", "bottom", "line-top", or "line-bottom". The "line-top" and "line-bottom" values operate similarly to "top" and "bottom", but are calculated relative to the lineHeight rather than fontSize alone.
color Null | Color | ExprRef

Text color for title text.
dx Number | ExprRef

Delta offset for title and subtitle text x-coordinate.
dy Number | ExprRef

Delta offset for title and subtitle text y-coordinate.
font String | ExprRef

Font name for title text.
fontSize Number | ExprRef

Font size in pixels for title text.
fontStyle String | ExprRef

Font style for title text.
fontWeight String | Number | ExprRef

Font weight for title text. This can be either a string (e.g "bold", "normal") or a number (100, 200, 300, …, 900 where "normal" = 400 and "bold" = 700).
frame String | String | ExprRef

The reference frame for the anchor position, one of "bounds" (to anchor relative to the full bounding box) or "group" (to anchor relative to the group width or height).
limit Number | ExprRef

The maximum allowed length in pixels of title and subtitle text.
lineHeight Number | ExprRef

Line height in pixels for multi-line title text or title text with "line-top" or "line-bottom" baseline.
offset Number | ExprRef

The orthogonal offset in pixels by which to displace the title group from its position along the edge of the chart.
orient String | ExprRef

Default title orientation ("top", "bottom", "left", or "right")
style String | String[]

A mark style property to apply to the title text mark.

Default value: "group-title".
subtitle Text

The subtitle Text.
subtitleColor Null | Color | ExprRef

Text color for subtitle text.
subtitleFont String | ExprRef

Font name for subtitle text.
subtitleFontSize Number | ExprRef

Font size in pixels for subtitle text.
subtitleFontStyle String | ExprRef

Font style for subtitle text.
subtitleFontWeight String | Number | ExprRef

Font weight for subtitle text. This can be either a string (e.g "bold", "normal") or a number (100, 200, 300, …, 900 where "normal" = 400 and "bold" = 700).
subtitleLineHeight Number | ExprRef

Line height in pixels for multi-line subtitle text.
subtitlePadding Number | ExprRef

The padding in pixels between title and subtitle text.
zindex Number

The integer z-index indicating the layering of the title group relative to other axis, mark and legend groups.

Default value: 0.

For example, we can customize the anchor of the title of a bar chart.

// Top-level View Specification
{
  ...
  "config": {
    "title": : {
      ...
    }
  }
}

Title Config

To provide themes for all titles, the title configuration (config: {title: {...}}) supports all title properties.