Documentation / @ripl/charts / SPACING

Variable: SPACING

const SPACING: object

Defined in: charts/src/constants/spacing.ts:8

The chart spacing scale.

Every gap between chart elements comes from this scale rather than a locally-chosen number, so spacing stays consistent as components are combined. It is an 8-point rhythm with a 4px half-step reserved for gaps inside a single component, where a full step would read as separation.

Type Declaration

lg

readonly lg: 24 = 24

24px — generous separation.

md

readonly md: 16 = 16

16px — the chart's own padding, and the gap between an axis title and its tick labels.

none

readonly none: 0 = 0

No gap.

sm

readonly sm: 8 = 8

8px — adjacent chart bands (title to legend, legend to plot) and two stacked axis bands.

xl

readonly xl: 32 = 32

32px — maximum separation.

xs

readonly xs: 4 = 4

4px — half-step, only for gaps within a single component (e.g. a legend swatch and its label).