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

You are 300 lines into a 1,200-line log, three search hits sit elsewhere in it, and the tail hasn't loaded yet.
MinimapStrip shows all three at once: a content thumbnail under a viewport window, a separate lane of annotation ticks,
and hatched fog over any region you haven't loaded or crawled. Keeping position and annotations in two lanes keeps them
as two reads instead of one muddle. Fog is a first-class state rather than a blank stretch that would read as empty
content, and the unknown share is disclosed in the accessible name. The window maps linearly to the domain; there is no
fisheye to distort where you are.

```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.

## Try it

```tsx
import { MinimapStrip } from "@microcharts/react/minimap-strip/interactive";
import { useState } from "react";

const [viewport, setViewport] = useState<[number, number]>([520, 660]);

<MinimapStrip
  data={{ content, window: viewport, marks, known }}
  onWindowChange={setViewport}
/>
```

## When to use it

Use it for document or log position and long-timeline navigation. For a single value use Progress; for exact content
values use Sparkline.

## Sizing

**log viewer cell**

```tsx
<MinimapStrip data={{ content, window }} width={80} height={12} />
```

**heat**

```tsx
<MinimapStrip data={data} mode="heat" />
```

## 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]],
  }}
/>
```

When `known` covers the whole domain, no fog renders at all.

## Four homes

**In a sentence**

```tsx
<p>
  Scroll position in log{" "}
  <span className="mc-inline">
    <MinimapStrip data={{ content, window, marks, known }} summary={false} />
  </span>{" "}
  — at line 660 of 1,200, dense middle section.
</p>
```

**In a table cell**

```tsx
<td>
  <MinimapStrip data={{ content, window, marks, known }} />
</td>
```

**In a KPI card**

```tsx
<div className="kpi">
  <span className="figure">55%</span>
  <span className="unit">through document</span>
  <MinimapStrip data={{ content, window, marks, known }} />
</div>
```

**In a tab header**

```tsx
<button className="tab">
  Errors <MinimapStrip data={{ content, window, marks, known }} />
</button>
```

## 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). On hover, focus, or
drag, the window's own edges float above it as a chip (`400–500`), the same range `aria-valuetext` reports, so a sighted
reader and a screen-reader reader get the same numbers. `readout={false}` drops the chip.

## 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).