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

# Manual Y-range scaling

> Drive TradingView-style price-axis scaling from your own gesture.

<Warning>
  **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.
</Warning>

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

<Note>
  **Live example:**
  [`app/demo/y-range-scale.tsx`](https://github.com/brandtnewlabs/react-native-livechart/blob/main/app/demo/y-range-scale.tsx)
  includes line/candle/multi-series toggles, preset buttons, a draggable price gutter, and
  double-tap reset.
</Note>

```tsx theme={null}
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`](/guides/time-scroll),
which control the visible time window.