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.

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 \| ExprRef	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	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 \| Object	When used with the default `"number"` and `"time"` format type, the text formatting pattern for labels of guides (axes, legends, headers) and text marks. If the format type is `"number"` (e.g., for quantitative fields), this is D3’s number format pattern. If the format type is `"time"` (e.g., for temporal fields), this is D3’s time format pattern. 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	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	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	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	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).