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

# Playback

> Control the time window, pausing, smoothing, and the Y-axis range.

`LiveChart` runs a tick loop on the UI thread that scrolls the time window and eases the live
value toward its target each frame. These props tune that engine.

<Note>
  **Live example:**
  [`app/demo/playback.tsx`](https://github.com/brandtnewlabs/react-native-livechart/blob/main/app/demo/playback.tsx)
  in the example app.
</Note>

<Frame caption="Pause, scrub the time window, and replay a recorded session">
  <video autoPlay loop muted playsInline controls poster="/media/playback.jpg" src="https://mintcdn.com/brandtnewlabs/3aK_iydbC8Ff9g3s/media/playback.mp4?fit=max&auto=format&n=3aK_iydbC8Ff9g3s&q=85&s=acc814b8ac8e98ade06bc1eb074072d6" data-path="media/playback.mp4" />
</Frame>

## Time window

`timeWindow` is the visible span in seconds — the chart shows the most recent `timeWindow`
seconds and scrolls left as new points arrive.

```tsx theme={null}
<LiveChart data={data} value={value} timeWindow={60} />
```

## Pausing

`paused` freezes the scroll. Live data keeps buffering while paused; resuming catches the window
back up to real time.

```tsx theme={null}
<LiveChart data={data} value={value} paused={isPaused} />
```

## Smoothing

The live tip eases toward the latest `value` instead of snapping. `smoothing` is the lerp speed —
`0` freezes the tip, `1` makes it instant. The default is `0.08`.

```tsx theme={null}
<LiveChart data={data} value={value} smoothing={0.5} />
```

## Y-axis range

By default the Y-axis fits the visible data with a little headroom. Three props reshape it:

* **`exaggerate`** — tighten the axis so small moves fill the height.
* **`nonNegative`** — clamp the lower bound at `0`.
* **`maxValue`** — pin a hard upper bound.

```tsx theme={null}
<LiveChart data={data} value={value} exaggerate nonNegative maxValue={150} />
```

See the full prop list in the [`LiveChart` reference](/api-reference/livechart). To render a fixed
historical span edge-to-edge instead of a live tail, see [Historical data](/guides/historical-data).