image

Draws a raster or SVG image for each data item. Use it for logos, icons, photo glyphs, or any artwork you want to place and size like a native mark.

gf.chart([{ label: "badge" }])
  .mark(
    gf.image({
      href: "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='64'%3E%3Crect width='96' height='64' rx='8' fill='%234e79a7'/%3E%3Ccircle cx='48' cy='32' r='18' fill='white'/%3E%3C/svg%3E",
      w: 96,
      h: 64,
    })
  )
  .render(root, { w: 150, h: 120 });

Signature

image({ href, w?, h?, x?, y?, opacity?, filter?, preserveAspectRatio? })

Parameters

An embedded raster/SVG image. Box geometry via the shared dims channels.

Option	Type	Default	Description
key	string		Internal per-node key override.
href	string		Required. Image URL or data URI.
filter	string		Raw SVG filter attribute.
opacity	number		Opacity, 0 to 1.
preserveAspectRatio	string	"xMidYMid meet"	Raw SVG preserveAspectRatio value.
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}.

Sizing

href is required. Width and height are resolved from the image's intrinsic dimensions when not given:

• w and h — the image is drawn at exactly that size.
• w only (or h only) — the missing dimension is derived from the image's intrinsic aspect ratio, so the image scales proportionally.
• neither — the image renders at its intrinsic pixel dimensions. GoFish reads these by probing the loaded image (or parsing an SVG data: URI), so the mark waits for the source to load before it produces a node.

Examples

// Fixed size
.mark(image({ href: bottlePng, w: 193, h: 600 }))

// Scale to a width, keep the aspect ratio
.mark(image({ href: bottleJpg, w: 90 }))

// Intrinsic size from a data URI
.mark(image({ href: inlineBadgeSvg }))

// Named for use with selectAll()
.mark(image({ href: logoPng, w: 48 }).name("logos"))