Concatenating views

To place views side-by-side, Vega-Lite’s view composition provides the following concatenation operators:

• hconcat - horizontal concatenation
• vconcat - vertical concatenation
• concat - general concatenation (wrappable)

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

Documentation Overview

• Documentation Overview
• Horizontal Concatenation
  • Example
• Vertical Concatenation
  • Example
• General (Wrappable) Concatenation
  • Example
• Resolve
• Concat Configuration

Horizontal Concatenation

To put multiple views into a column, set the "hconcat" to an array of view specifications.

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

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

Example

Vertical Concatenation

To put multiple views into a row, set the "vconcat" to an array of view specifications.

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

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

Example

General (Wrappable) Concatenation

To put multiple views into a flexible flow layout, set the "concat" to an array of view specifications and specify the "columns" property to set the number of maximum items per rows.

{
  "concat": [
    ...  // Specifications
  ],
  "columns": ...,
  ...
}

In addition to common properties of a view specification, a general concat specification has the following properties:

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.

Concat Configuration

// Top-level View Specification
{
  ...,
  "config": { // Configuration Object

    "concat": { // - Concat Configuration
      "spacing": ...,
      "columns": ...,
    },
    ...
  }
}

The concat configuration supports the following properties: