# MinimapStrip (/docs/charts/minimap-strip)

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.

```tsx
<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"
  width={300}
  height={18}
/>
```

## Install

```tsx
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"
/>
```

Setup (package + stylesheet): [Quickstart](/docs/quickstart#set-up-with-an-ai-agent) or paste [`/agent-setup.md`](/agent-setup.md) into your agent.


## When to use it

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


## Variants

```tsx
<MinimapStrip
  data={{
    content: Array.from(
      { length: 1200 },
      (_, i) => Math.abs(Math.sin(i / 40)) + Math.abs(Math.sin(i / 150)) * 0.6,
    ),
    window: [300, 440],
    marks: [600, 1000],
  }}
  mode="heat"
/>
```

## Edge cases

```tsx
// `known` covers the whole domain, so no hatched fog renders
<MinimapStrip
  data={{
    content: Array.from({ length: 200 }, (_, i) => Math.abs(Math.sin(i / 20))),
    window: [40, 90],
    known: [[0, 200]],
  }}
/>
```


## 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 | Description |
| --- | --- | --- |
| `data` (required) | `{ 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` | (interactive) Fires with the new `[start, end]` index range as the brush window is dragged. |
| `animate` | `boolean` | (interactive) Opt-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](/docs/quickstart#the-shared-grammar).