Time-scroll

<LiveChart data={data} value={value} timeScroll />

​

Turning it back off

<LiveChart data={data} value={value} timeScroll={enabled} returnToLive={false} />        // instant snap
<LiveChart data={data} value={value} timeScroll={enabled} returnToLive={{ duration: 700 }} /> // slower glide

​

Gestures

<LiveChart data={data} value={value} timeScroll={{ gesture: "axisDrag" }} />

• "holdToScrub" (default) — a one-finger drag anywhere scrolls the timeline; scrubbing moves to a press-and-hold (Rainbow-style). A quick drag scrolls; hold, then drag, to scrub.
• "axisDrag" — only a drag that starts on the bottom x-axis strip (“grab the time ruler”) scrolls. The plot area stays free, so a one-finger drag there scrubs immediately.

​

Hold duration (scrubHoldMs)

<LiveChart
  data={data}
  value={value}
  scrub
  timeScroll={{ gesture: "holdToScrub", scrubHoldMs: 350 }}
/>

​

Release momentum (fling)

<LiveChart data={data} value={value} timeScroll={{ fling: false }} />

​

Overscroll (overscroll)

<LiveChart data={data} value={value} timeScroll={{ overscroll: 0.9 }} />

​

Pinch-to-zoom (zoom)

<LiveChart data={data} value={value} timeScroll zoom />

<LiveChart data={data} value={value} zoom={{ minTimeWindow: 5, maxTimeWindow: 3600 }} />

​

Reset zoom from a button

import { useRef } from "react";
import { Button } from "react-native";
import { LiveChart, type LiveChartHandle } from "react-native-livechart";

const chartRef = useRef<LiveChartHandle>(null);

<Button title="Reset zoom" onPress={() => chartRef.current?.resetZoom()} />

<LiveChart
  ref={chartRef}
  data={data}
  value={value}
  timeWindow={300}
  timeScroll
  zoom
/>

​

Paging callbacks (onVisibleRangeChange, onReachStart)

<LiveChart
  data={data}
  value={value}
  timeScroll
  zoom
  onVisibleRangeChange={({ startSec, endSec, following }) => {
    // throttled to ~1 Hz; `following` is true at the live edge
  }}
  onReachStart={() => {
    // fires once when the left edge nears the oldest data — fetch older history here
  }}
/>

• onVisibleRangeChange fires (throttled to ~1 Hz) with the window’s startSec / endSec and whether the chart is following the live edge.
• onReachStart is a one-shot edge trigger: it fires once when the left edge comes within one window-width of the earliest retained point, then re-arms after you move back out — the cue to load the next page of older data. When the fetched data extends data / candles further back, it can fire again as you keep scrolling.

​

Full-width plot while scrolled (yAxis.float)

<LiveChart
  data={data}
  value={value}
  mode="candle"
  candles={candles}
  liveCandle={liveCandle}
  timeScroll
  yAxis={{ float: true }}
  badge={{ followViewEdge: true }}
/>

​

Track the visible edge (badge.followViewEdge)

​

Keep the dot on the live point (dot.trackWhileParked)

<LiveChart
  data={data}
  value={value}
  timeScroll={{ overscroll: 0.5 }}
  dot={{ trackWhileParked: true }}
/>

​

Notes

• Both charts. timeScroll and zoom are wired into LiveChart and LiveChartSeries. In multi-series, each series’ dot / value label tracks its value at the visible right edge while scrolled (the dot rides the end of each line, not the live price).
• Coexists with scrubbing. Plot-area scrub (and the order ticket) work alongside time-scroll — the gestures are disambiguated by region (axisDrag) or press-hold (holdToScrub). Pinch-zoom is two-finger, so it stays out of the one-finger gestures’ way.
• axisDrag in multi-series doesn’t yet exclude the bottom-band from scrub; holdToScrub (the default) is the recommended gesture for LiveChartSeries.
• See the LiveChart reference and TimeScrollConfig / ZoomConfig for every field.