Manual Y-range scaling

Experimental. yRangeScale is available on LiveChart (line and candle modes) and LiveChartSeries. The library owns the scale math, while your app owns the gesture and reset behavior.

LiveChart normally fits its Y-axis to the visible data. Pass a SharedValue<number> through yRangeScale to multiply that fitted range around its midpoint: 1 keeps auto-fit, values above 1 show more vertical range, and values between 0 and 1 zoom in.

Live example: app/demo/y-range-scale.tsx includes line/candle/multi-series toggles, preset buttons, a draggable price gutter, and double-tap reset.

import { Gesture, GestureDetector } from "react-native-gesture-handler";
import {
  cancelAnimation,
  useSharedValue,
  withTiming,
} from "react-native-reanimated";

const yRangeScale = useSharedValue(1);
const startScale = useSharedValue(1);

const priceScalePan = Gesture.Pan()
  .onStart(() => {
    cancelAnimation(yRangeScale);
    startScale.set(yRangeScale.get());
  })
  .onUpdate((event) => {
    const next = startScale.get() * Math.exp(event.translationY / 160);
    yRangeScale.set(Math.max(0.25, Math.min(4, next)));
  });

const reset = () => {
  yRangeScale.set(withTiming(1, { duration: 240 }));
};

<LiveChart data={data} value={value} yRangeScale={yRangeScale} />;

// The same SharedValue scales every visible series around their shared fit.
<LiveChartSeries series={series} yRangeScale={yRangeScale} />;

Mount priceScalePan on your own axis-gutter view with GestureDetector. Keeping that gesture outside the chart lets you choose its hit area and compose it with the rest of your screen.

Behavior

The multiplier is applied after the normal margin and minimum-range fit, so auto-fit continues tracking the visible data while scaled.
On LiveChartSeries, the multiplier applies to the shared range after hidden series are excluded.
While the SharedValue changes, the displayed range tracks it without frame-lag. Once it stops, ordinary live-data changes use the chart’s configured smoothing again.
Reset with an animation such as withTiming(1) for the same smooth result whether the current scale is above or below 1.
nonNegative and maxValue are applied after scaling, so those hard bounds still win.
Values must be positive and finite. Invalid values safely behave as 1; clamp gesture output to a product-appropriate range as shown above.

yRangeScale changes the value range only. It composes with timeScroll and zoom, which control the visible time window.

Getting started

Chart types

Interaction

Annotations & overlays

Dynamic styling & effects

Styling & theming

Live data & engine

Behavior

​Behavior

Behavior