ggsvelte
GitHub
Navigate
On this page

Labs

Plot chrome labels: title, subtitle, caption, and per-aesthetic guide titles (axes and legends). <Labs> is a declaration-only child of <GGPlot> — it emits no markup and registers a live labs layer. Without a plot ancestor it is inert.

Props

Flat optional strings. There is no value={…} escape hatch: <Labs {...computed} /> already covers computed bags.

title
Plot title above the panel.
subtitle
Subtitle under the title.
caption
Small caption under the plot.
x
X axis title. Default is a humanized form of the mapped field name (sentence case).
y
Y axis title. Default is a humanized form of the mapped field name (sentence case).
color
Color legend title (humanized field name by default).
fill
Fill legend title (humanized field name by default).
size
Size legend title (humanized field name by default).
linewidth
Linewidth legend title (humanized field name by default).
alpha
Alpha legend title (humanized field name by default).
shape
Shape legend title (humanized field name by default).
linetype
Linetype legend title (humanized field name by default).

Svelte

import { GeomCol, GGPlot, Labs } from "@ggsvelte/svelte";

<GGPlot data={rows} aes={{ x: "quarter", y: "sales" }}>
  <Labs
    title="Quarterly sales"
    subtitle="FY25"
    caption="Source: internal ledger"
    x="Quarter"
    y="Sales (M USD)"
  />
  <GeomCol />
</GGPlot>

PortableSpec JSON

The same strings live on the top-level labs object. The fluent builder merges with .labs({…}).

{
  "data": [{ "quarter": "Q1", "sales": 12 }],
  "mapping": { "x": "quarter", "y": "sales" },
  "layers": [{ "geom": "col" }],
  "labs": {
    "title": "Quarterly sales",
    "subtitle": "FY25",
    "caption": "Source: internal ledger",
    "x": "Quarter",
    "y": "Sales (M USD)"
  }
}

Keyed merge

labs is a keyed-merge family. Two <Labs> children that set different keys both survive. Two children that set the same key emit a DUPLICATE_MERGE_KEY advisory; the later value wins.

<GGPlot data={rows} aes={{ x: "quarter", y: "sales", color: "region" }}>
  <Labs title="Sales" x="Quarter" />
  <!-- keyed merge: color joins; a second title would win and warn -->
  <Labs color="Region" caption="Internal" />
  <GeomCol />
</GGPlot>
Docs