This website is for Vega-Lite v4. Go to the main Vega-Lite homepage for the latest release.

Rect

Edit this page
// Single View Specification
{
  "data": ... ,
  "mark": "rect",
  "encoding": ... ,
  ...
}

The rect mark represents an arbitrary rectangle.

Documentation Overview

Rect Mark Properties

// Single View Specification
{
  ...
  "mark": {
    "type": "rect",
    ...
  },
  "encoding": ... ,
  ...
}

A rect mark definition can contain any standard mark properties and the following special properties:

Property Type Description
align String | ExprRef

The horizontal alignment of the text or ranged marks (area, bar, image, rect, rule). One of "left", "right", "center".

Note: Expression reference is not supported for range marks.

baseline String | ExprRef

For text marks, the vertical text baseline. One of "alphabetic" (default), "top", "middle", "bottom", "line-top", "line-bottom", or an expression reference that provides one of the valid values. The "line-top" and "line-bottom" values operate similarly to "top" and "bottom", but are calculated relative to the lineHeight rather than fontSize alone.

For range marks, the vertical alignment of the marks. One of "top", "middle", "bottom".

Note: Expression reference is not supported for range marks.

cornerRadius Number | ExprRef

The radius in pixels of rounded rectangles or arcs’ corners.

Default value: 0

Examples

Heatmap

Using the rect marks with discrete fields on x and y channels creates a heatmap.

We can similarly use rect with binned fields and discretized temporal fields.

Ranged Rectangles

Specifying both x and x2 and/or y and y2 creates a rectangle that spans over certain x and/or y values.

For example, we can use rect to create an annotation layer that provides a shading between global min and max values.

Rect Config

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

The rect property of the top-level config object sets the default properties for all rect marks. If mark property encoding channels are specified for marks, these config values will be overridden.

The rect config can contain any rect mark properties (except type, style, and clip).