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. Turn on Zero floor and choose 8× to see how a nonNegative chart stops its zoom-out at 0.

Drag the price gutter to stretch or compress the fitted Y-range

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.
On a nonNegative chart, zoom-out stops when the lower bound reaches 0. The upper bound does not keep growing after the floor is reached, so the values remain centered instead of being pinned to the bottom of the plot.
maxValue is applied after scaling, so that hard ceiling still wins.
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