<Region>

component@pond-ts/chartssource

A shaded span over an x range — a lap, a zone, a selected interval. Its label flies as a flag off the left edge.

Props

fromnumberrequired

Start x in axis units (time or value).

tonumberrequired

End x in axis units.

edgesboolean

Draw the vertical side outlines at from/to. Default true. false shades the span with no edge lines (fill only) — a soft highlight band. Edit-mode resizing still works (the grab areas are invisible).

editingboolean

When true, this mark is in single-annotation edit (the double-click target): handles stay out, it's draggable, and it reads as level 1 — while other marks stay static. Independent of the container's global editAnnotations. Pair with onEditAnnotation (the consumer holds an editingId and sets editing={editingId === id}).

hoveredboolean

Controlled hover (OR'd with pointer hover) — lets a legend row light the mark remotely. Pair with the container's onHoverAnnotation to sync both ways.

idstring

Stable consumer id — a click (or double-click outside edit) reports it via onSelectAnnotation.

labelstring | false

Chip label. Omit to auto-label from–to with the shared x formatter; pass false (or '') to render no label chip — e.g. an inert selectable={false} highlight band, where the auto-label would just show raw axis values.

onChange(next: { from: number; to: number }) => void

Make the region editable (in edit mode): drag the body to move it (both edges shift), drag an edge to resize. Reports the new { from, to }.

selectableboolean

Whether the region responds to hover + selection (default true). When false it's inert background context — drawn at the back (level 3) always, and the double-click hit-test skips it.

selectedboolean

Controlled selection — brightens to the front (level 1; the body too). Edge handles are an edit-mode hover affordance, not a selection cue. Ignored if not selectable.