Stack

To stack fields in Vega-Lite, users can either use thestack property of anencoding field definition or astack transform inside thetransform array.

Documentation Overview

• Stack in Encoding Field Definition
  • Stack Bar Chart
  • Stack Area Chart
  • Normalized Stacked Bar and Area Charts
  • Streamgraph
  • Layered Bar Chart
  • Diverging Stacked Bar Chart (Stacked with negative values)
  • Sorting Stack Order
  • Layering Lines on top of Stacked Area Chart
• Stack Transform
  • Diverging Bar Chart
  • Mosaic Chart

Stack in Encoding Field Definition

// A Single View or a Layer Specification{  ...,  "mark/layer": ...,  "encoding": {     // Encoding    "x" or "y": {      "field": ...,      "type": "quantitative",      "stack": ..., // Stack      ...    },    ...  },  ...}

Thestack property of aposition field definition determines type of stacking offset if the field should be stacked.

Stack Bar Chart

Adding a color field to a bar chart also creates stacked bar chart by default.

Stack Area Chart

Similarly, adding a color field to area chart also creates stacked area chart by default.

Normalized Stacked Bar and Area Charts

You can setstack to"normalize" to create normalized (or percentage) stacked bar and area charts.

Streamgraph

Settingstack to"center" for a stacked area chart creates a streamgraph:

Layered Bar Chart

Ifstack isnull, the marks will be layered on top of each other. In this example, setting the mark’sopacity to be semi-transparent (0.6) creates a layered bar chart.

Diverging Stacked Bar Chart (Stacked with negative values)

The stack transform can also handle negative values by creating a diverging stacked bar chart.

Note: that the stack transform cannot handle if there should be items stacked in the middle like in the“Diverging Stacked Bar Chart with Neutral Parts” example.

Sorting Stack Order

You can use the order channel to sort the order of stacked marks.

For example, given a stacked bar chart for the barley dataset:

By default, the stacked bar are sorted by the stack grouping fields (color in this example).

Mapping the sum of yield toorder channel will sort the layer of stacked bar by the sum of yield instead.

Here we can see that site with higher yields for each type of barley are put on the top of the stack (rightmost).

If you want to define custom sort order, you can derive a new field using thecalculate transform and sort by that field instead. For example, the following plot makes “University Farm” and “Grand Rapids” be the first (0) and second values in the stack order:

Note: we plan to havea better syntax for customized sort order in the future.

Layering Lines on top of Stacked Area Chart

Sinceline marks are not stacked by default, to layer lines on top of stacked area charts, you have to manually set thestack offset for the lines.

Stack Transform

// Any View Specification{  ...  "transform": [    // Stack Transform    {      "stack": ...,      "groupby": ...,      "offset": ...,      "sort": ...,      "as": ...    }    ...  ],  ...}

For example, here is the samenormalized stacked bar chart of the"population", grouped by"age" and colored by"gender", but this time using thestack property oftransform.

Thestack transform in thetransform array has the following properties:

We can usestack transform in conjunction with other transforms to create more complicated charts.

Diverging Bar Chart

Here we initiallystack by"question" and then usewindow transform to offset each stack.

Mosaic Chart

To create a mosaic chart westack twice, once in each direction along withwindow transform.

To add labels to this chart, consultthis example.