React minimap strip chart — overview density with a brushable viewport. Tiny accessible SVG microchart; RSC-safe static or /interactive.

MinimapStrip answers "where am I in the whole — and where in the whole is everything else I care about?". A content thumbnail sits under a viewport window and a lane of annotation ticks, and any region you haven't loaded or crawled is drawn as fog rather than blank — because absence is not the same as zero. The unknown share travels with the accessible name.

MinimapStrip

interactive · 3.99 kB · static · 2.75 kB

Install

Import & usereact/minimap-strip

import { MinimapStrip } from "@microcharts/react/minimap-strip";<MinimapStrip  data={{    content: Array.from(      { length: 1200 },      (_, i) => Math.abs(Math.sin(i / 40)) + Math.abs(Math.sin(i / 150)) * 0.6,    ),    window: [520, 660],    marks: [100, 600, 1100],    known: [[0, 1104]],  }}  title="Document position"/>

Needs package + stylesheetSet up with AI

Try it

When to use it

Good for — document or log position, long-timeline navigation.
Avoid for — a single value (Progress) or exact content values (Sparkline).

Sizing

Variants

heat

Viewing 300 to 440 of 1,200.

Edge cases

fully known — no fog

Viewing 40 to 90 of 200.

Four homes

Why this default

Bars plus a separate mark lane keep "where am I" and "where are the annotations" as two clean reads instead of one muddle. Fog-of-war is a first-class state — unknown regions get a hatched texture, never a blank stretch that would read as empty content, and the unknown share is disclosed in the summary. The window maps linearly to the domain; there is no fisheye to distort where you are.

Accessibility

The accessible name places you in the whole — "Viewing 12% of the whole (300–440 of 1,200); 2 marks." The interactive entry is a slider: drag or click to move the window, or nudge it with ←/→ (Shift for a bigger jump).

Props

Prop	Type	Notes
data*	{ content, window, marks?, known? }	Density series, viewport, ticks, covered regions.
mode	"bars" \| "heat"	Heat is a calmer opacity strip.
markLane	boolean	Dedicated tick lane vs overlaying ticks.
onWindowChange	(window: [number, number]) => void	interactiveFires with the new `[start, end]` index range as the brush window is dragged.
animate	boolean	interactiveOpt-in entrance motion when the chart mounts client-side — add `import "@microcharts/react/motion"` once. Inert on the server, on hydrated server HTML, and under `prefers-reduced-motion`.

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.