layer

Overlays multiple children in the same coordinate space without any layout offset.

gf.layer([
  gf.rect({ w: 100, h: 80, fill: gf.color.blue[3] }),
  gf.ellipse({ w: 60, h: 60, fill: gf.color.red[3] }),
]).render(root, { w: 200, h: 150 });

Both shapes occupy the same space. The ellipse is drawn on top of the rectangle because it appears second in the array.

Signature

layer(options?, [child1, child2, ...])

Parameters

Compose children on the same canvas at (0, 0) unless placed by constraints. Also accepts explicit box dims when given a self-scaling size.

Option	Type	Default	Description
key	string		Internal per-node key override.
coord	any		Coordinate transform (polar(), clock(), wavy(), ...) the children are drawn in. Given one, the layer becomes that coordinate boundary.
axes	AxesOptions		Draw the coordinate axes of this layer's coord. Ignored on a layer with no coord.
transform	object		Non-affine-foldable scale applied to the composed children.
box	boolean		True renders this as a coordinate-space transparent "box" boundary rather than a plain layer.

Box dimensions

Option	Type	Default	Description
x	number | string | FieldExpr		Left edge position.
cx	number | string | FieldExpr		Center x.
x2	number | string | FieldExpr		Right edge position.
w	number | string | FieldExpr		Width.
emX	boolean		Embed x in the parent's x space.
y	number | string | FieldExpr		Top/bottom edge position (y-up: bottom).
cy	number | string | FieldExpr		Center y.
y2	number | string | FieldExpr		Other y edge position.
h	number | string | FieldExpr		Height.
emY	boolean		Embed y in the parent's y space.
dims	Record<string, AxisDimsValue>		Box dimensions by axis name: x/y, or a name the enclosing coordinate space declares (polar theta/r, geo lon/lat). Each value is a position (like x) or an interval {min, center, max, size, embedded}.

Z-ordering

By default, children are drawn in the order they appear in the array — later children appear on top. You can override this with .zOrder(n) on any child. Children are sorted by z-order value before rendering; lower values are drawn first (underneath). Children with the same z-order value keep their original array order.

layer([
  chart(data)
    .flow(scatter({ by: "x", y: "y" }))
    .mark(line())
    .zOrder(0),
  chart(data)
    .flow(scatter({ by: "x", y: "y" }))
    .mark(circle({ r: 5 }))
    .zOrder(1),
]);

.zOrder() is available on ChartBuilder (the object returned by chart()) and on GoFishNode instances.