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.

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.