Skip to content

stack

Like spread but with zero spacing — items stack edge-to-edge. Used for stacked bar charts.

js
gf.Chart(seafood)
  .flow(
    gf.spread("lake", { dir: "x" }),
    gf.stack("species", { dir: "y" })
  )
  .mark(gf.rect({ h: "count", fill: "species" }))
  .render(root, { w: 400, h: 250, axes: true });

Signature

ts
stack(field, { dir, alignment = "start", w?, h? })

Parameters

OptionTypeDescription
fieldstringField to group by before stacking
dir"x" | "y"Required. Stack direction
alignment"start" | "middle" | "end"Alignment within each slot
wnumber | stringWidth or field
hnumber | stringHeight or field

Example

ts
// Stacked bar chart grouped by "site", stacked by "variety"
.flow(
  spread("variety", { dir: "x" }),
  stack("site", { dir: "y" })
)