rect

Draws a rectangle for each data item.

gf.chart([{ value: 80 }])
  .mark(gf.rect({ w: 120, h: "value", fill: "steelblue", rx: 4 }))
  .render(root, { w: 200, h: 150 });

Signature

rect({ w?, h?, dims?, fill?, stroke?, strokeWidth = 0, rx?, ry? })

Parameters

A rectangle. Box geometry via the shared dims channels.

Option	Type	Default	Description
key	string		Internal per-node key override.
rx	number	0	Corner radius, x.
ry	number	0	Corner radius, y.
aspectRatio	number		w/h ratio to enforce; the constraining axis wins when both are data-driven.
debug	boolean		Dev-only flag: logs this mark's key and datum to the console as it is built. It changes nothing about what is drawn.

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}.

Paint

Option	Type	Default	Description
fill	string | FieldExpr		Fill color, or a field name for a color scale.
stroke	string | FieldExpr		Stroke color. Defaults to fill.
strokeWidth	number	0	Stroke width in pixels.
opacity	number	1	Opacity, 0 to 1.
filter	string		Raw SVG filter attribute.

Chain .label(accessor, ...) on the returned mark to attach a text label — there is no label option here.

Axis names

x, y, w, and h mean the first and second axis in any coordinate space. Under polar that is the angle and the radius; under geo it is longitude and latitude.

To use the names a coordinate space gives its axes, put them in dims. Each key is an axis name, and each value is either a position (like x) or an object with any of min, center, max, size, and embedded:

// Inside polar(): the same wedge as rect({ w: 0.4, h: "value" })
rect({ dims: { theta: { size: 0.4 }, r: { size: "value" } } });

// Inside geo(): the same box as rect({ x: "lon", y: "lat", w: 4, h: 4 })
rect({ dims: { lon: "lon", lat: "lat" }, w: 4, h: 4 });

x and y are always valid keys too. A name the enclosing coordinate space does not declare throws an error that lists the ones it does, and setting the same part of an axis twice (for example w and dims.theta.size) is an error. The same dims option works on ellipse, petal, text, image, and layer.

Examples

// Bar chart: height encodes "value" field
.mark(rect({ h: "value" }))

// Fixed size with rounded corners
.mark(rect({ w: 20, h: 20, rx: 4 }))

// Color encodes "category" field
.mark(rect({ h: "value", fill: "category" }))

// Named for use with selectAll()
.mark(rect({ h: "value" }).name("bars"))