RugStrip

RugStrip answers "where do the raw observations actually sit?". Every tick is one real observation — no binning, no jitter, no thinning. Stacked duplicates darken (tiered opacity), and markValue tells the chart's strongest single story: one raw value against the field.

Install

import { RugStrip } from "@microcharts/react/rug-strip";// salaries, yourOffer — real values under “Sample data” below<RugStrip data={salaries} markValue={yourOffer} title="Pay band" />

const salaries = [42, 48, 51, 53, 55, 58, 61, 63, 66, 71, 55, 52, 49, 58, 62, 75, 83, 58, 54, 60];const yourOffer = 62;

Try it

When to use it

• Good for — "you are here" in a pay band, raw spread beside a stat, margin composition under a Sparkline.
• Avoid for — more than ~400 observations (a rug promises raw marks and never downsamples; use HistogramStrip) or trends over time (Sparkline).

Sizing

Variants

Edge cases

Empty data draws a quiet centered axis line — not a blank hole — so the strip still reads as "a rug with nothing on it" rather than a layout gap.

A single value (or an all-equal field) has a zero-span domain; the tick renders at the strip's midpoint instead of dividing by zero.

A markValue outside the observed domain clamps to the nearest edge — it never escapes the box or silently rescales the field around it.

Four homes

Why this default

Ticks sit at 35% opacity — singles stay visible while stacks read as density. Because a browser paints one path's stroke as a single operation, coincident ticks are bucketed into opacity tiers (35% / 60% / 85%) rather than relying on overlap compositing that never happens. Regular ticks are inset one unit so the full-height accent highlight reads "taller" without escaping the box.

Accessibility

The accessible name is the distribution — "8 values from 42 to 75, median 59.5." The interactive entry walks observations in sorted order and announces each with its rank: "48 — 2nd of 17."

The interactive entry follows the shared interaction contract: arrow keys rove between units on both axes, Home and End jump to the ends, and a click, tap, Enter or Space selects a unit — pinning its readout so it survives blur, until you select it again or press Escape. On touch, a tap pins and a drag scrubs.

Props

Plus the shared grammar — data, domain, color, title, summary, format — and the layout props (width, height, className, style) that every chart accepts. Interactive entries also share animate and live, and — wherever a chart has more than one navigable unit — onActive, onSelect, selectedIndex and defaultSelectedIndex; and — wherever the chart shows a hover value — readout. See the shared grammar.