Skip to content

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? })

Parameters

OptionTypeDescription
wnumber | stringWidth — number for fixed, field name to encode data
hnumber | stringHeight — number for fixed, field name to encode data
fillstringFill color or field name for color encoding
strokestringStroke color (defaults to fill)
strokeWidthnumberStroke width (default 0)

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" });

See Also

  • circle — Equal width and height (circular shape)
  • rect — Rectangular shape