text

Draws a text label for each data item. Used for value labels on bars, point annotations, node names in diagrams, and axis titles.

gf.chart([{ label: "GoFish" }])
  .mark(gf.text({ text: "label", fontSize: 28, fill: "steelblue" }))
  .render(root, { w: 240, h: 80 });

Signature

text({ text, fill = "black", stroke?, strokeWidth = 0, fontSize = 12,
       fontFamily = "system-ui, sans-serif", fontStyle?, fontWeight?, rotate = 0,
       textAnchor = "start", debugBoundingBox = false, x?, y?, w?, h? })

Parameters

A text label. Box geometry via the shared dims channels positions the text anchor.

Option	Type	Default	Description
key	string		Internal per-node key override.
text	string | FieldExpr		Required. Text content (raw channel — a literal, field name, or accessor).
fill	string | FieldExpr	"black"	Fill color, or a field name for a color scale.
stroke	string | FieldExpr		Stroke color.
strokeWidth	number	0	Stroke width in pixels.
filter	string		Raw SVG filter attribute.
fontSize	number	12	Font size in pixels.
fontFamily	string	"system-ui, sans-serif"	Font family.
fontStyle	string		Raw CSS font-style (e.g. "italic").
fontWeight	number | string		CSS font-weight (e.g. 300, 700, "bold").
debugBoundingBox	boolean	false	Draw the text's bounding box, for layout debugging.
rotate	number	0	Rotation in degrees, applied in the chart's y-up world frame about the text anchor.
textAnchor	"start" | "middle" | "end"	"start"	Where the text anchor — the local origin rotate pivots about and dims channels position — sits along the string: its first character, center, or last character.

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

// Static label
.mark(text({ text: "Hello", fontSize: 24, fill: "steelblue" }))

// Text content read from a data field
.mark(text({ text: "name" }))

// Value labels: layer text totals on top of bars
layer([
  chart(seafood)
    .flow(spread({ by: "lake", dir: "x" }))
    .mark(rect({ h: "count" }).name("bars")),
  chart(selectAll("bars"))
    .flow(group({ by: "lake" }))
    .mark((d) =>
      spread({ dir: "y", alignment: "middle", spacing: 10 }, [
        d[0],
        text({ text: String(sumBy(d[0].datum, "count")) }),
      ])
    ),
]);

// Rotated y-axis title (reads bottom-to-top)
.mark(text({ text: "count", rotate: 90, fontSize: 13 }))

// Italic label
.mark(text({ text: "note", fontStyle: "italic" }))

// Light-weight label
.mark(text({ text: "caption", fontWeight: 300 }))