Concatenating views

Edit this page

To place views side-by-side, Vega-Lite’s view compositon 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.

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.

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.