Concatenating views

Edit this page

To place views side-by-side, Vega-Lite’s view composition provides operators for horizontal (hconcat) and vertical (vconcat) concatenation.

If you concatenate similar views where the only difference is the field that is used in an encoding, use the repeat operator.

Documentation Overview

Horizontal Concatenation

Put multiple views into a row by putting the specs for each view into an array and assign it to the hconcat property.

{
  "hconcat": [
    ...  // Specifications
  ]
}

In addition to common properties of a view specification, a horizontal concatenation specification has the following properties:

Property Type Description
hconcat Spec[]

Required. A list of views that should be concatenated and put into a row.

bounds String

The bounds calculation method to use for determining the extent of a sub-plot. One of full (the default) or flush.

  • If set to full, the entire calculated bounds (including axes, title, and legend) will be used.
  • If set to flush, only the specified width and height values for the sub-view will be used. The flush setting can be useful when attempting to place sub-plots without axes or legends into a uniform grid structure.

Default value: "full"

center Boolean

Boolean flag indicating if subviews should be centered relative to their respective rows or columns.

Default value: false

spacing Number

The spacing in pixels between sub-views of the concat operator.

Default value: 10

resolve Resolve

Scale, axis, and legend resolutions for horizontally concatenated charts.

Example

Vertical Concatenation

Put multiple views into a column by putting the specs for each view into an array and assign it to the vconcat property.

{
  "vconcat": [
    ...  // Specifications
  ]
}

In addition to common properties of a view specification, a vertical concatenation specification has the following properties:

Property Type Description
vconcat Spec[]

Required. A list of views that should be concatenated and put into a column.

bounds String

The bounds calculation method to use for determining the extent of a sub-plot. One of full (the default) or flush.

  • If set to full, the entire calculated bounds (including axes, title, and legend) will be used.
  • If set to flush, only the specified width and height values for the sub-view will be used. The flush setting can be useful when attempting to place sub-plots without axes or legends into a uniform grid structure.

Default value: "full"

center Boolean

Boolean flag indicating if subviews should be centered relative to their respective rows or columns.

Default value: false

spacing Number

The spacing in pixels between sub-views of the concat operator.

Default value: 10

resolve Resolve

Scale, axis, and legend resolutions for vertically concatenated charts.

Example

Resolve

The default resolutions for concatenation are independent scales and axes for position channels and shared scales and legends for all other channels. Currently, Vega-Lite does not support shared axes for concatenated views.