> ## Documentation Index
> Fetch the complete documentation index at: https://react-native-livechart.brandtnewlabs.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Sparklines

> Render many cheap, non-animated mini-charts in a list or grid with static mode.

`static` renders a `LiveChart` **once** with zero per-frame animation loops. The engine tick
loop, the degen/trade/candle/marker callbacks, the pulse, and the entry reveal are all
disabled. That makes each instance cheap enough to put dozens of them in a scrolling list — a
watchlist row, a token grid, a portfolio of sparklines.

Touch interaction still works: `scrub` and `scrubAction` are on-demand gestures with no
per-frame loop, so a static chart costs nothing at rest yet becomes scrubbable the moment a
finger lands on it — see [Scrubbing a static chart](#scrubbing-a-static-chart) below.

It mirrors `react-native-graph`'s `animated={false}`.

<Frame caption="Hundreds of static sparklines in one virtualized, recycled list">
  <video autoPlay loop muted playsInline controls poster="/media/sparklines.jpg" src="https://mintcdn.com/brandtnewlabs/3aK_iydbC8Ff9g3s/media/sparklines.mp4?fit=max&auto=format&n=3aK_iydbC8Ff9g3s&q=85&s=435108881cabfe60a2f70c3ec3ad3dcc" data-path="media/sparklines.mp4" />
</Frame>

## When to use it

Reach for `static` when you're rendering **many** mini-charts at once and don't need each one
to animate continuously. A single hero chart should stay live; a `FlatList` of forty thumbnails
should be `static`. They can still be scrubbed on touch (see below) — `static` only turns off
the continuous loop, not interaction.

## A sparkline cell

Strip the chrome you don't need in a thumbnail — badge, axes, pulse — and frame the data
edge-to-edge:

```tsx theme={null}
function SparklineCell({ history, lastValue, lastTime, span }) {
  return (
    <LiveChart
      static
      data={history}
      value={lastValue}
      timeWindow={span}
      nowOverride={lastTime}
      badge={false}
      yAxis={false}
      xAxis={false}
      pulse={false}
    />
  );
}
```

Drop it into a list or grid:

```tsx theme={null}
<FlatList
  data={tokens}
  numColumns={2}
  keyExtractor={(t) => t.id}
  renderItem={({ item }) => (
    <SparklineCell
      history={item.history}
      lastValue={item.lastValue}
      lastTime={item.lastTime}
      span={item.span}
    />
  )}
/>
```

## Framing the data

A static chart never scrolls, so you decide exactly what's on screen. Set `timeWindow` to the
span you want to show and `nowOverride` to your dataset's last timestamp (unix seconds) so the
window ends right at the latest point. This is the same approach as the
[historical data fill](/guides/historical-data) pattern.

## Scrubbing a static chart

`static` turns off the continuous render loop, not interaction — so a still sparkline is still
scrubbable. `scrub` (and `scrubAction`) are event-driven gestures: they cost nothing while the
finger is off the chart, and on touch they read the already-settled geometry. So you get a
zero-idle-cost cell that reveals its crosshair / value read-out the moment it's pressed:

```tsx theme={null}
<LiveChart
  static
  data={history}
  value={lastValue}
  timeWindow={span}
  nowOverride={lastTime}
  scrub          // ← works on a static chart; the loop stays off until you touch it
/>;
```

This is the right tool for a list of cells you want **inert until touched**. Before, the only
way to stop the loop was `static`, which also took scrubbing with it; now you can have both.

<Note>
  Continuous animations — `pulse`, `degen`, the entry reveal — stay off in `static` mode (they're
  loops, not gestures). Only the on-demand touch gestures (`scrub`, `scrubAction`) remain live.
</Note>

### Pausing off-screen charts in a long list

Because `static` is a prop, you can flip it from a list's viewability callback: render off-screen
rows `static` (loop fully off, still scrubbable if they peek on screen) and the visible hero row
live. Toggling `static` → live resumes the loop and catches up.

### Mounting a big grid: batch it

`static` makes a settled sparkline nearly free **at rest**, but the **mount** isn't free — each
chart builds its full hook tree once. Mounting dozens in a single commit (a non-virtualized grid)
can hold up a navigation for a beat. Two ways out:

* **Virtualize** — a `FlatList` / LegendList only mounts what's visible (see the Coin list demo).
* **Defer** — for a fixed grid, render same-size placeholders in the first commit and mount the
  cells a couple of `requestAnimationFrame`s later, so the screen transition lands instantly.
  Keep the deferral state in the grid component and `memo` the cells so the batch re-renders
  nothing else. (Prefer one deferred batch over many tiny ones — deferred renders are
  time-sliced, so each extra batch adds real overhead.) The demo's
  [`app/demo/sparklines.tsx`](https://github.com/brandtnewlabs/react-native-livechart/blob/main/app/demo/sparklines.tsx)
  shows the pattern.

## `static` vs `paused`

They sound similar but do opposite things:

* **`paused`** freezes a **live** chart — the tick loop keeps running, the value keeps buffering,
  and resuming catches the window back up to real time. Use it for one interactive chart.
* **`static`** removes the loops **entirely** — nothing animates and nothing recovers, because
  there's nothing to recover. Use it for many instances at once. Scrubbing still works (above).

See the full prop list in the [`LiveChart` reference](/api-reference/livechart).