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


Edit this page

Marks are the basic visual building block of a visualization. They provide basic shapes whose properties (such as position, size, and color) can be used to visually encode data, either from a data field, or a constant value.

The mark property of a single view specification can either be (1) a string describing a mark type or (2) a mark definition object.

// Single View Specification
  "data": ... ,
  "mark": ... ,       // mark
  "encoding": ... ,

Documentation Overview

Mark Types

Vega-Lite supports the following primitive mark types: "area", "bar", "circle", "line", "point", "rect", "rule", "square", "text", "tick", and "geoshape". In general, one mark instance is generated per input data element. However, line and area marks represent multiple data elements as a contiguous line or shape.

In addition to primitive marks, Vega-Lite also support composite marks, which are “macros” for complex layered graphics that contain multiple primitive marks. Supported composite mark types include "boxplot", "errorband", "errorbar".

For example, a bar chart has mark as a simple string "bar".

Mark Definition Object

// Single View Specification
  "mark": {
    "type": ...,       // mark

To customize properties of a mark, users can set mark to be a mark definition object instead of a string describing mark type. The rest of this section lists standard mark properties for primitive mark types. Additionally, some marks may have special mark properties (listed in their documentation page). For example, point marks support shape and size properties in addition to these standard properties.

Note: If mark property encoding channels are specified, these mark properties will be overridden.

General Mark Properties

Property Type Description
type String

Required. The mark type. This could a primitive mark type (one of "bar", "circle", "square", "tick", "line", "area", "point", "geoshape", "rule", and "text") or a composite mark type ("boxplot", "errorband", "errorbar").

style String | String[]

A string or array of strings indicating the name of custom styles to apply to the mark. A style is a named collection of mark property defaults defined within the style configuration. If style is an array, later styles will override earlier styles. Any mark properties explicitly defined within the encoding will override a style default.

Default value: The mark’s name. For example, a bar mark will have style "bar" by default. Note: Any specified style will augment the default style. For example, a bar mark with "style": "foo" will receive from and (the specified style "foo" has higher precedence).

tooltip Value | TooltipContent | Null

The tooltip text string to show upon mouse hover or an object defining which fields should the tooltip be derived from.

  • If tooltip is {"content": "encoding"}, then all fields from encoding will be used.
  • If tooltip is {"content": "data"}, then all fields that appear in the highlighted data point will be used.
  • If set to null, then no tooltip will be used.
clip Boolean

Whether a mark be clipped to the enclosing group’s width and height.

order Null | Boolean

For line and trail marks, this order property can be set to null or false to make the lines use the original order in the data sources.

Position and Offset Properties

Property Type Description
x Number | String

X coordinates of the marks, or width of horizontal "bar" and "area" without specified x2 or width.

The value of this channel can be a number or a string "width" for the width of the plot.

x2 Number | String

X2 coordinates for ranged "area", "bar", "rect", and "rule".

The value of this channel can be a number or a string "width" for the width of the plot.

width Number

Width of the marks.

height Number

Height of the marks.

y Number | String

Y coordinates of the marks, or height of vertical "bar" and "area" without specified y2 or height.

The value of this channel can be a number or a string "height" for the height of the plot.

y2 Number | String

Y2 coordinates for ranged "area", "bar", "rect", and "rule".

The value of this channel can be a number or a string "height" for the height of the plot.

xOffset Number

Offset for x-position.

x2Offset Number

Offset for x2-position.

yOffset Number

Offset for y-position.

y2Offset Number

Offset for y2-position.

Color Properties

Property Type Description
filled Boolean

Whether the mark’s color should be used as fill color instead of stroke color.

Default value: false for point, line and rule; otherwise, true.

Note: This property cannot be used in a style config.

color Color

Default color. Note that fill and stroke have higher precedence than color and will override color.

Default value: "#4682b4"

Note: This property cannot be used in a style config.

fill Color

Default Fill Color. This has higher precedence than config.color

Default value: (None)

stroke Color

Default Stroke Color. This has higher precedence than config.color

Default value: (None)

opacity Number

The overall opacity (value between [0,1]).

Default value: 0.7 for non-aggregate plots with point, tick, circle, or square marks or layered bar charts and 1 otherwise.

fillOpacity Number

The fill opacity (value between [0,1]).

Default value: 1

strokeOpacity Number

The stroke opacity (value between [0,1]).

Default value: 1

Stroke Style Properties

Property Type Description
strokeCap String

The stroke cap for line ending style. One of "butt", "round", or "square".

Default value: "square"

strokeDash Number[]

An array of alternating stroke, space lengths for creating dashed or dotted lines.

strokeDashOffset Number

The offset (in pixels) into which to begin drawing with the stroke dash array.

strokeJoin String

The stroke line join method. One of "miter", "round" or "bevel".

Default value: "miter"

strokeMiterLimit Number

The miter limit at which to bevel a line join.

strokeWidth Number

The stroke width, in pixels.

Here is an example to the usage of the stroke dash where 6 is the size of dashes, and 4 is the size of spaces:

Marks can act as hyperlinks when the href property or channel is defined. When the href property is specified, the cursor mark property is set to "pointer" by default to serve as affordance for hyperlinks.

Property Type Description
href String

A URL to load upon mouse click. If defined, the mark acts as a hyperlink.

cursor String

The mouse cursor used over the mark. Any valid CSS cursor type can be used.

Mark Config

// Top-level View Specification
  "config": {
    "mark": ...,
    "area": ...,
    "bar": ...,
    "circle": ...,
    "line": ...,
    "point": ...,
    "rect": ...,
    "rule": ...,
    "geoshape": ...,
    "square": ...,
    "text": ...,
    "tick": ...

The mark property of the config object sets the default properties for all marks. In addition, the config object also provides mark-specific config using its mark type as the property name (e.g., config.area) for defining default properties for each mark.

The global mark config (config.mark) supports all standard mark properties (except type, style, clip, and orient). For mark-specific config, please see the documentation for each mark type.


  1. If mark properties in mark definition or mark property encoding channels are specified, these config values will be overridden.
  2. Mark config do not support offset mark properties.

Mark Style Config

  // Top Level Specification
  "config": {
    "style": {

In addition to the default mark properties above, default values can be further customized using named styles defined under the style property in the config object.

Property Type Description
style Object

An object hash that defines key-value mappings to determine default properties for marks with a given style. The keys represent styles names; the values have to be valid mark configuration objects.

For example, to set a default shape and stroke width for point marks with a style named "triangle":

  "style": {
    "triangle": {
      "shape": "triangle-up",
      "strokeWidth": 2

Styles can then be invoked by including a style property within a mark definition object.

Note: To customize the style for guides (axes, headers, and legends), Vega-Lite also includes the following built-in style names:

  • "guide-label": style for axis, legend, and header labels
  • "guide-title": style for axis, legend, and header titles
  • "group-title": styles for chart titles

Example: Styling Labels

You can use text marks as labels for other marks by setting style for the marks and using style config to configure offset (dx or dy), align, and baseline.

See also: a similar example that uses mark definition to configure offset, align, and baseline.