circle

Draws a circle for each data item. A convenience wrapper around ellipse with equal width and height.

gf.chart([{ size: 40 }])
  .mark(gf.circle({ r: 40, fill: "coral" }))
  .render(root, { w: 150, h: 150 });

Signature

circle({ r?, fill?, stroke?, strokeWidth?, opacity?, debug? })

Parameters

A circle, drawn as an aspect-locked ellipse. Does NOT support the boxDims positioning channels directly (JS circle() in marks/chart.ts destructures only r/fill/stroke/strokeWidth/opacity) — position it via spread/scatter.

Option	Type	Default	Description
r	number | string | FieldExpr		Radius; becomes w=h=2r on the underlying ellipse.
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, applied to fill and stroke. In JS it may also be a per-datum accessor or a live(...) value; only a literal number crosses the wire.
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.

Examples

// Fixed size circle
.mark(circle({ r: 10, fill: "steelblue" }))

// Circle with stroke
.mark(circle({ r: 15, fill: "white", stroke: "black", strokeWidth: 2 }))

// Named for use with selectAll()
.mark(circle({ r: 8 }).name("points"))

// Per-datum opacity: fade everything but the current day
.mark(circle({ r: 3, fill: "species", opacity: (d) => (d.day === day() ? 1 : 0.1) }))