ellipse
Draws an ellipse. Unlike circle, allows independent control of width and height.
js
gf.ellipse({ w: 100, h: 60, fill: "mediumseagreen" }).render(root, {
w: 150,
h: 100,
});Signature
ts
ellipse({ w?, h?, fill?, stroke?, strokeWidth?, opacity = 1 })Parameters
An ellipse. Box geometry via the shared dims channels; paint is a strict subset of paint (no filter).
| 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. |
aspectRatio | number | w/h ratio to enforce. When both dims are data-driven, the constraining axis is used. | |
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}. |
Examples
ts
// Fixed size ellipse
ellipse({ w: 80, h: 40, fill: "coral" });
// Ellipse with stroke
ellipse({ w: 60, h: 30, fill: "white", stroke: "black", strokeWidth: 2 });
// Data-driven dimensions
ellipse({ w: "width", h: "height", fill: "category" });
// Translucent ellipse
ellipse({ w: 80, h: 40, fill: "coral", opacity: 0.5 });