ggsvelte
GitHub
Navigate
On this page

GuideColorsteps

Binned color legend for binned color or fill scales. Step blocks with optional labels; use instead of legend or colorbar when the scale type is binned.

Channels

Bind this guide with the shell channel prop (or the matching key under guides in JSON). Only these aesthetics validate:

  • color
  • fill

Valid when the color or fill scale type is binned. Discrete categories use GuideLegend; continuous ramps use GuideColorbar.

Svelte component

import { GGPlot, GeomPoint, GuideColorsteps } from "@ggsvelte/svelte";

<GGPlot data={rows} aes={{ x: "displ", y: "hwy", color: "class" }}>
  <GeomPoint />
  <GuideColorsteps channel="color" title="Label" order={1} />
</GGPlot>

JSON and helpers

import { guideColorsteps, guides } from "@ggsvelte/spec";

guides({ color: guideColorsteps({ title: "Label", order: 1 }) })
// → { guides: { color: { type: "colorsteps", … } } }
{
  "guides": {
    "color": {
      "type": "colorsteps"
    }
  }
}

Helper: guideColorsteps (alias guide_colorsteps). Schema type: ColorstepsGuideSpec. Portable type: "colorsteps".

Props

Every shell takes a required channel prop (not part of the portable guide object — it is the key under guides). Options below map 1:1 to the guide JSON fields.

channel required

"color" | "fill"

Aesthetic this guide configures. Must be one of the channels listed above.

title

string

Optional guide title string (max 256 characters). Omit to use the scale or labs title.

order

integer

Integer placement rank among sibling guides (−1024…1024). Lower values sort earlier. Not the plot-wide Legend entry-sort enum.

position

"auto" | "right" | "bottom"

Guide placement relative to the panel: "auto", "right", or "bottom". Auto picks a side from available space.

direction

"auto" | "vertical" | "horizontal"

Layout of keys or the color ramp: "auto", "vertical", or "horizontal". Bottom placement usually forces horizontal.

showLabels

boolean

When false, hide tick or step labels on the axis, colorbar, or colorsteps guide.

collision

"ellipsis" | "error"

How long labels behave when they do not fit: ellipsis, wrap (legend only), preserve (axis), auto (axis), or error.

force

boolean

When true, keep this guide even if the scale would normally suppress it (for example a single-level discrete scale).

theme

GuideThemeSpec

Bounded presentation overrides for this guide block (title/label size, gaps, colorbar size).

← All guides · Positions · Scales and guides

Docs