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

Axis

Edit this page

Axes provide axis lines, ticks, and labels to convey how a positional range represents a data range. Simply put, axes visualize scales.

By default, Vega-Lite automatically creates axes with default properties for x and y channels when they encode data fields. User can set the axis property of x- or y-field definition to an object to customize axis properties or set axis to null to remove the axis.

Besides axis property of a field definition, the configuration object (config) also provides axis config (config: {axis: {...}}) for setting default axis properties for all axes.

Documentation Overview

Axis Properties

// A Single View or a Layer Specification
{
  ...,
  "mark/layer": ...,
  "encoding": {
    "x": {
      "field": ...,
      "type": ...,
      "axis": {                // Axis
        ...
      },
      ...
    },
    "y": ...,
    ...
  }
}

To customize axis, you can specify an axis object in an encoding channel’s definition. This section lists all properties of axes.

See also: This interactive article demonstrates axes and legends in the underlying Vega language.

General

Property Type Description
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 group, removing the axis from the ARIA accessibility tree.

Default value: true

bandPosition Number | ExprRef

An interpolation fraction indicating where, for band scales, axis ticks should be positioned. A value of 0 places ticks at the left edge of their bands. A value of 0.5 places ticks in the middle of their bands.

Default value: 0.5

description String | ExprRef

A text description of this axis for ARIA accessibility (SVG output only). If the aria property is true, for SVG output the “aria-label” attribute will be set to this description. If the description is unspecified it will be automatically generated.

maxExtent Number | ExprRef

The maximum extent in pixels that axis ticks and labels should use. This determines a maximum offset value for axis titles.

Default value: undefined.

minExtent Number | ExprRef

The minimum extent in pixels that axis ticks and labels should use. This determines a minimum offset value for axis titles.

Default value: 30 for y-axis; undefined for x-axis.

orient String | ExprRef

The orientation of the axis. One of "top", "bottom", "left" or "right". The orientation can be used to further specialize the axis type (e.g., a y-axis oriented towards the right edge of the chart).

Default value: "bottom" for x-axes and "left" for y-axes.

offset Number

The offset, in pixels, by which to displace the axis from the edge of the enclosing group or data rectangle.

Default value: derived from the axis config’s offset (0 by default)

position Number | ExprRef

The anchor position of the axis in pixels. For x-axes with top or bottom orientation, this sets the axis group x coordinate. For y-axes with left or right orientation, this sets the axis group y coordinate.

Default value: 0

style String | String[]

A string or array of strings indicating the name of custom styles to apply to the axis. A style is a named collection of axis property defined within the style configuration. If style is an array, later styles will override earlier styles.

Default value: (none) Note: Any specified style will augment the default style. For example, an x-axis mark with "style": "foo" will use config.axisX and config.style.foo (the specified style "foo" has higher precedence).

translate Number | ExprRef

Coordinate space translation offset for axis layout. By default, axes are translated by a 0.5 pixel offset for both the x and y coordinates in order to align stroked lines with the pixel grid. However, for vector graphics output these pixel-specific adjustments may be undesirable, in which case translate can be changed (for example, to zero).

Default value: 0.5

zindex Number

A non-negative integer indicating the z-index of the axis. If zindex is 0, axes should be drawn behind all chart elements. To put them in front, set zindex to 1 or more.

Default value: 0 (behind the marks).

Example: Using Axis minExtent to Align Multi-View Plots

By default, Vega-Lite automatically sets the axis extent (the space axis ticks and labels use). However, to align axes between multiple plots in multi-view displays, you can manually set minExtent (and optionally maxExtent) to make the extent consistent across plots.

Domain

Property Type Description
domain Boolean | ExprRef

A boolean flag indicating if the domain (the axis baseline) should be included as part of the axis.

Default value: true

domainCap String | ExprRef

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

Default value: "butt"

domainColor Null | Color | ExprRef

Color of axis domain line.

Default value: "gray".

domainOpacity Number | ExprRef

Opacity of the axis domain line.

domainWidth Number | ExprRef

Stroke width of axis domain line

Default value: 1

domainDash Number[] | ExprRef

An array of alternating [stroke, space] lengths for dashed domain lines.

domainDashOffset Number | ExprRef

The pixel offset at which to start drawing with the domain dash array.

Labels

Property Type Description
format String | Dict

When used with the default "number" and "time" format type, the text formatting pattern for labels of guides (axes, legends, headers) and text marks.

See the format documentation for more examples.

When used with a custom formatType, this value will be passed as format alongside datum.value to the registered function.

Default value: Derived from numberFormat config for number format and from timeFormat config for time format.

formatType String

The format type for labels. One of "number", "time", or a registered custom format type.

Default value: - "time" for temporal fields and ordinal and nominal fields with timeUnit. - "number" for quantitative fields as well as ordinal and nominal fields without timeUnit.

labels Boolean | ExprRef

A boolean flag indicating if labels should be included as part of the axis.

Default value: true.

labelAlign String | ExprRef | ConditionalAxisString

Horizontal text alignment of axis tick labels, overriding the default setting for the current axis orientation.

labelAngle Number | ExprRef

The rotation angle of the axis labels.

Default value: -90 for nominal and ordinal fields; 0 otherwise.

labelBaseline String | ExprRef | ConditionalAxisString

Vertical text baseline of axis tick labels, overriding the default setting for the current axis orientation. 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.

labelBound Number | Boolean | ExprRef

Indicates if labels should be hidden if they exceed the axis range. If false (the default) no bounds overlap analysis is performed. If true, labels will be hidden if they exceed the axis range by more than 1 pixel. If this property is a number, it specifies the pixel tolerance: the maximum amount by which a label bounding box may exceed the axis range.

Default value: false.

labelColor Null | Color | ExprRef | ConditionalAxisColor

The color of the tick label, can be in hex color code or regular color name.

labelExpr String

Vega expression for customizing labels.

Note: The label text and value can be assessed via the label and value properties of the axis’s backing datum object.

labelFlush Boolean | Number

Indicates if the first and last axis labels should be aligned flush with the scale range. Flush alignment for a horizontal axis will left-align the first label and right-align the last label. For vertical axes, bottom and top text baselines are applied instead. If this property is a number, it also indicates the number of pixels by which to offset the first and last labels; for example, a value of 2 will flush-align the first and last labels and also push them 2 pixels outward from the center of the axis. The additional adjustment can sometimes help the labels better visually group with corresponding axis ticks.

Default value: true for axis of a continuous x-scale. Otherwise, false.

labelFlushOffset Number | ExprRef

Indicates the number of pixels by which to offset flush-adjusted labels. For example, a value of 2 will push flush-adjusted labels 2 pixels outward from the center of the axis. Offsets can help the labels better visually group with corresponding axis ticks.

Default value: 0.

labelFont String | ExprRef | ConditionalAxisString

The font of the tick label.

labelFontSize Number | ExprRef | ConditionalAxisNumber

The font size of the label, in pixels.

labelFontStyle String | ExprRef | ConditionalAxisString

Font style of the title.

labelFontWeight String | Number | ExprRef | ConditionalAxisString

Font weight of axis tick labels.

labelLimit Number | ExprRef

Maximum allowed pixel width of axis tick labels.

Default value: 180

labelLineHeight Number | ExprRef

Line height in pixels for multi-line label text or label text with "line-top" or "line-bottom" baseline.

labelOffset Number | ExprRef | ConditionalAxisNumber

Position offset in pixels to apply to labels, in addition to tickOffset.

Default value: 0

labelOpacity Number | ExprRef | ConditionalAxisNumber

The opacity of the labels.

labelOverlap String | ExprRef

The strategy to use for resolving overlap of axis labels. If false (the default), no overlap reduction is attempted. If set to true or "parity", a strategy of removing every other label is used (this works well for standard linear axes). If set to "greedy", a linear scan of the labels is performed, removing any labels that overlaps with the last visible label (this often works better for log-scaled axes).

Default value: true for non-nominal fields with non-log scales; "greedy" for log scales; otherwise false.

labelPadding Number | ExprRef | ConditionalAxisNumber

The padding in pixels between labels and ticks.

Default value: 2

labelSeparation Number | ExprRef

The minimum separation that must be between label bounding boxes for them to be considered non-overlapping (default 0). This property is ignored if labelOverlap resolution is not enabled.

See also: guide-label style config (common styles for axis, legend, and header labels).

Example: Using Axis labelExpr to Display Initial Letters of Month Name

Ticks

Property Type Description
ticks Boolean | ExprRef

Boolean value that determines whether the axis should include ticks.

Default value: true

tickBand String | ExprRef

For band scales, indicates if ticks and grid lines should be placed at the "center" of a band (default) or at the band "extent"s to indicate intervals

tickCap String | ExprRef

The stroke cap for the tick lines’ ending style. One of "butt", "round" or "square".

Default value: "butt"

tickColor Null | Color | ExprRef | ConditionalAxisColor

The color of the axis’s tick.

Default value: "gray"

tickCount Number | String | Object | ExprRef

A desired number of ticks, for axes visualizing quantitative scales. The resulting number may be different so that values are “nice” (multiples of 2, 5, 10) and lie within the underlying scale’s range.

For scales of type "time" or "utc", the tick count can instead be a time interval specifier. Legal string values are "millisecond", "second", "minute", "hour", "day", "week", "month", and "year". Alternatively, an object-valued interval specifier of the form {"interval": "month", "step": 3} includes a desired number of interval steps. Here, ticks are generated for each quarter (Jan, Apr, Jul, Oct) boundary.

Default value: Determine using a formula ceil(width/40) for x and ceil(height/40) for y.

tickDash Number[] | ExprRef | ConditionalAxisNumberArray

An array of alternating [stroke, space] lengths for dashed tick mark lines.

tickExtra Boolean | ExprRef

Boolean flag indicating if an extra axis tick should be added for the initial position of the axis. This flag is useful for styling axes for band scales such that ticks are placed on band boundaries rather in the middle of a band. Use in conjunction with "bandPosition": 1 and an axis "padding" value of 0.

tickMinStep Number | ExprRef

The minimum desired step between axis ticks, in terms of scale domain values. For example, a value of 1 indicates that ticks should not be less than 1 unit apart. If tickMinStep is specified, the tickCount value will be adjusted, if necessary, to enforce the minimum step value.

tickOffset Number | ExprRef

Position offset in pixels to apply to ticks, labels, and gridlines.

tickOpacity Number | ExprRef | ConditionalAxisNumber

Opacity of the ticks.

tickRound Boolean | ExprRef

Boolean flag indicating if pixel position values should be rounded to the nearest integer.

Default value: true

tickSize Number | ExprRef | ConditionalAxisNumber

The size in pixels of axis ticks.

Default value: 5

tickWidth Number | ExprRef | ConditionalAxisNumber

The width, in pixels, of ticks.

Default value: 1

values Number[] | String[] | Boolean[] | DateTime[] | ExprRef

Explicitly set the visible axis tick values.

Example: Using Axis tickBand to Show Grid Between Marks

Using tickBand, we can change the axis ticks and gridlines to be drawn between marks.

Title

Property Type Description
title Text | Null

A title for the field. If null, the title will be removed.

Default value: derived from the field’s name and transformation function (aggregate, bin and timeUnit). If the field has an aggregate function, the function is displayed as part of the title (e.g., "Sum of Profit"). If the field is binned or has a time unit applied, the applied function is shown in parentheses (e.g., "Profit (binned)", "Transaction Date (year-month)"). Otherwise, the title is simply the field name.

Notes:

1) You can customize the default field title format by providing the fieldTitle property in the config or fieldTitle function via the compile function’s options.

2) If both field definition’s title and axis, header, or legend title are defined, axis/header/legend title will be used.

titleAlign String | ExprRef

Horizontal text alignment of axis titles.

titleAnchor Null | String | ExprRef

Text anchor position for placing axis titles.

titleAngle Number | ExprRef

Angle in degrees of axis titles.

titleBaseline String | ExprRef

Vertical text baseline for axis titles. 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.

titleColor Null | Color | ExprRef

Color of the title, can be in hex color code or regular color name.

titleFont String | ExprRef

Font of the title. (e.g., "Helvetica Neue").

titleFontSize Number | ExprRef

Font size of the title.

titleFontStyle String | ExprRef

Font style of the title.

titleFontWeight String | Number | ExprRef

Font weight of the title. This can be either a string (e.g "bold", "normal") or a number (100, 200, 300, …, 900 where "normal" = 400 and "bold" = 700).

titleLimit Number | ExprRef

Maximum allowed pixel width of axis titles.

titleLineHeight Number | ExprRef

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

titleOpacity Number | ExprRef

Opacity of the axis title.

titlePadding Number | ExprRef

The padding, in pixels, between title and axis.

titleX Number | ExprRef

X-coordinate of the axis title relative to the axis group.

titleY Number | ExprRef

Y-coordinate of the axis title relative to the axis group.

Example: Customize Title

For example, the following plot has a customized x-axis title.

See also: Axis Title Config and guide-title style config (common styles for axis, legend, and header titles).

Grid

Property Type Description
grid Boolean

A boolean flag indicating if grid lines should be included as part of the axis

Default value: true for continuous scales that are not binned; otherwise, false.

gridCap String | ExprRef

The stroke cap for grid lines’ ending style. One of "butt", "round" or "square".

Default value: "butt"

gridColor Null | Color | ExprRef | ConditionalAxisColor

Color of gridlines.

Default value: "lightGray".

gridDash Number[] | ExprRef | ConditionalAxisNumberArray

An array of alternating [stroke, space] lengths for dashed grid lines.

gridOpacity Number | ExprRef | ConditionalAxisNumber

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

Default value: 1

gridWidth Number | ExprRef | ConditionalAxisNumber

The grid width, in pixels.

Default value: 1

Conditional Axis Properties

We can set axis properties (which can be of type “ConditionalAxisProperty”) to a conditional value definition.

Note that each axis tick, grid line, and label instance is backed by a data object with the following fields, which may be accessed as part of the test condition in a condition axis property.

  • label - the string label
  • value - the data value
  • index - fractional tick index (0 for the first tick and 1 for the last tick)

Example: Conditional Axis Properties and Multi-Line Axis Label

In the following example, we adjust the gridDash and tickDash properties in a line chart based on whether a particular grid line falls on a year boundary. We also use the labelExpr property to show multi-line labels for year and month, showing the year number only for January of each year.

We can also conditionally hide some labels and ticks in the following Lasagna plot using conditional labelColor and tickColor:

Axis Config

// Top-level View Specification
{
  ...
  "config": {
    "axis": : ...,
    "axisX": : ...,
    "axisY": : ...,
    "axisLeft": : ...,
    "axisRight": : ...,
    "axisTop": : ...,
    "axisBottom": : ...,
    "axisBand": : ...,
    "axisQuantitative": : ...,
    "axisTemporal": : ...,
    ...
  }
}

Axis configuration defines default settings for axes. Properties defined under the "axis" property in the top-level config object are applied to all axes.

Additional property blocks can target more specific axis types based on the orientation ("axisX", "axisY", "axisLeft", "axisTop", etc.), band scale type ("axisBand"), scale’s data type ("axisDiscrete", "axisQuantitative", and "axisTemporal"), or both orientation and scale/data type (e.g., "axisXTemporal"). For example, properties defined under the "axisBand" property will only apply to axes visualizing "band" scales.

An axis configuration supports all axis properties except position, orient, format, values, and zindex. In addition, it also supports the disable property:

Property Type Description
disable Boolean

Disable axis by default.

Note:

  • If multiple axis config blocks apply to a single axis, type-based options take precedence over orientation-based options, which in turn take precedence over general options.

  • If an axis config has a style property, the style will have lower precedence than any of the axis config properties.

  • In summary, here is the precedence level order for each axis property (from the highest to the lowest):

    • Axis properties (axis.*)
    • Axis style (config.axis[axis.style].*)
    • Orientation and type based axis config (e.g., config.axisXBand.*)
    • Type-based axis config (e.g., config.axisBand.*)
    • Orientation-based axis config (config.axisX/Y.*)
    • General axis config (config.axis.*)
    • Style of orientation and type based axis config (e.g., config.style[config.axisXBand.style].*)
    • Style of type-based axis config (e.g., config.style[config.axisBand.style].*)
    • Style of orientation-based axis config (e.g., config.style[config.axisX.style].*)
    • Style general axis config (config.style[config.axis.style].*)

See also: Axis Labels Properties and guide-label style config (common styles for by axis, legend, and header labels).