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

Mark

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").

aria Boolean | ExprRef

A boolean flag indicating if ARIA attributes should be included (SVG output only). If false, the “aria-hidden” attribute will be set on the output SVG element, removing the mark item from the ARIA accessibility tree.

description String | ExprRef

A text description of the mark item for ARIA accessibility (SVG output only). If specified, this property determines the “aria-label” attribute.

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 config.style.bar and config.style.foo (the specified style "foo" has higher precedence).

tooltip Number | String | Boolean | TooltipContent | ExprRef | 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 true or {"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 or false, then no tooltip will be used.

See the tooltip documentation for a detailed discussion about tooltip in Vega-Lite.

Default value: null

clip Boolean

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

invalid String | Null

Defines how Vega-Lite should handle marks for invalid values (null and NaN). - If set to "filter" (default), all data items with null values will be skipped (for line, trail, and area marks) or filtered (for other marks). - If null, all data items are included. In this case, invalid values will be interpreted as zeroes.

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 | ExprRef

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 | ExprRef

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 | ExprRef

Width of the marks.

height Number | ExprRef

Height of the marks.

y Number | String | ExprRef

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 | ExprRef

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 | ExprRef

Offset for x-position.

x2Offset Number | ExprRef

Offset for x2-position.

yOffset Number | ExprRef

Offset for y-position.

y2Offset Number | ExprRef

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 all point, line, and rule marks as well as geoshape marks for graticule data sources; otherwise, true.

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

color Color | Gradient | ExprRef

Default color.

Default value: "#4682b4"

Note: - This property cannot be used in a style config. - The fill and stroke properties have higher precedence than color and will override color.

fill Color | Gradient | Null | ExprRef

Default fill color. This property has higher precedence than config.color. Set to null to remove fill.

Default value: (None)

stroke Color | Gradient | Null | ExprRef

Default stroke color. This property has higher precedence than config.color. Set to null to remove stroke.

Default value: (None)

blend Blend | ExprRef

The color blend mode for drawing an item on its current background. Any valid CSS mix-blend-mode value can be used.

__Default value: "source-over"

opacity Number | ExprRef

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 | ExprRef

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

Default value: 1

strokeOpacity Number | ExprRef

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

Default value: 1

Stroke Style Properties

Property Type Description
strokeCap String | ExprRef

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

Default value: "butt"

strokeDash Number[] | ExprRef

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

strokeDashOffset Number | ExprRef

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

strokeJoin String | ExprRef

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

Default value: "miter"

strokeMiterLimit Number | ExprRef

The miter limit at which to bevel a line join.

strokeWidth Number | ExprRef

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 URI | ExprRef

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

cursor String | ExprRef

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.

Note:

  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.