Marks#
We saw in Encodings that the encode()
method is
used to map columns to visual attributes of the plot.
The mark
property is what specifies how exactly those attributes
should be represented on the plot.
Altair supports the following primitive mark types:
Mark |
Method |
Description |
---|---|---|
|
A pie chart. |
|
|
A filled area plot. |
|
|
A bar plot. |
|
|
A scatter plot with filled circles. |
|
|
Visualization containing spatial data |
|
|
A scatter plot with image markers. |
|
|
A line plot. |
|
|
A scatter plot with configurable point shapes. |
|
|
A filled rectangle, used for heatmaps |
|
|
A vertical or horizontal line spanning the axis. |
|
|
A scatter plot with filled squares. |
|
|
A scatter plot with points represented by text. |
|
|
A vertical or horizontal tick mark. |
|
|
A line with variable widths. |
In addition, Altair provides the following composite marks:
Mark Name |
Method |
Description |
Example |
---|---|---|---|
|
A box plot. |
||
|
A continuous band around a line. |
||
|
An error bar around a point. |
In Altair, marks can be most conveniently specified by the mark_*
methods
of the Chart object (e.g. mark_bar
), which take optional keyword arguments to configure the look of the marks.
Mark Properties#
This section lists standard mark properties for primitive mark types. Additionally, some marks may have special mark properties (listed in their documentation page).
General Mark Properties#
Click to show table
Property |
Type |
Description |
---|---|---|
aria |
anyOf( |
A boolean flag indicating if ARIA attributes should be included (SVG output only). If |
description |
anyOf( |
A text description of the mark item for ARIA accessibility (SVG output only). If specified, this property determines the “aria-label” attribute. |
style |
anyOf( |
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 Default value: The mark’s name. For example, a bar mark will have style |
tooltip |
anyOf( |
The tooltip text string to show upon mouse hover or an object defining which fields should the tooltip be derived from.
See the Default value: |
clip |
|
Whether a mark be clipped to the enclosing group’s width and height. |
invalid |
[‘filter’, None] |
Defines how Vega-Lite should handle marks for invalid values (
|
order |
[null, boolean] |
For line and trail marks, this |
Position and Offset Properties#
Click to show table
Property |
Type |
Description |
---|---|---|
x |
anyOf( |
X coordinates of the marks, or width of horizontal The |
x2 |
anyOf( |
X2 coordinates for ranged The |
width |
anyOf( |
Width of the marks. One of:
|
height |
anyOf( |
Height of the marks. One of:
|
y |
anyOf( |
Y coordinates of the marks, or height of vertical The |
y2 |
anyOf( |
Y2 coordinates for ranged The |
xOffset |
anyOf( |
Offset for x-position. |
x2Offset |
anyOf( |
Offset for x2-position. |
yOffset |
anyOf( |
Offset for y-position. |
y2Offset |
anyOf( |
Offset for y2-position. |
Color Properties#
Click to show table
Property |
Type |
Description |
---|---|---|
filled |
|
Whether the mark’s color should be used as fill color instead of stroke color. Default value: Note: This property cannot be used in a style config. |
color |
Default color. Default value: ■ Note:
|
|
fill |
Default fill color. This property has higher precedence than Default value: (None) |
|
stroke |
Default stroke color. This property has higher precedence than Default value: (None) |
|
blend |
The color blend mode for drawing an item on its current background. Any valid CSS mix-blend-mode value can be used. __Default value: |
|
opacity |
anyOf( |
The overall opacity (value between [0,1]). Default value: |
fillOpacity |
anyOf( |
The fill opacity (value between [0,1]). Default value: |
strokeOpacity |
anyOf( |
The stroke opacity (value between [0,1]). Default value: |
Stroke Style Properties#
Click to show table
Property |
Type |
Description |
---|---|---|
strokeCap |
The stroke cap for line ending style. One of Default value: |
|
strokeDash |
anyOf(array( |
An array of alternating stroke, space lengths for creating dashed or dotted lines. |
strokeDashOffset |
anyOf( |
The offset (in pixels) into which to begin drawing with the stroke dash array. |
strokeJoin |
anyOf( |
The stroke line join method. One of Default value: |
strokeMiterLimit |
anyOf( |
The miter limit at which to bevel a line join. |
strokeWidth |
anyOf( |
The stroke width, in pixels. |
Hyperlink Properties#
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.
Click to show table
Property |
Type |
Description |
---|---|---|
href |
A URL to load upon mouse click. If defined, the mark acts as a hyperlink. |
|
cursor |
The mouse cursor used over the mark. Any valid CSS cursor type can be used. |