Manual Y-range scaling

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} />;

import { useState } from "react";
import { LiveChartSeries, type RangeAnimationConfig } from "react-native-livechart";
import { useReducedMotion } from "react-native-reanimated";

const RETURN_MS = 300;
// Close 99.9% of a stationary gap over this window, rather than setting a duration.
const RETURN_SPEED = 1 - 0.001 ** (1000 / 60 / RETURN_MS);

// Inside your component; series is your existing SharedValue<SeriesConfig[]>.
const [held, setHeld] = useState(false);
const reduceMotion = useReducedMotion();
const rangeAnimation: RangeAnimationConfig = {
  animateExpansion: held && !reduceMotion,
  expansionSmoothing: 0.08,
  contractionSmoothing: RETURN_SPEED,
};

<LiveChartSeries
  series={series}
  referenceLines={[{ id: "consensus", value: 80, excludeFromRange: !held }]}
  rangeAnimation={rangeAnimation}
  smoothing={reduceMotion ? 1 : 0.08}
  scrub={{ panGestureDelay: 250 }}
  onGestureStart={() => setHeld(true)}
  onGestureEnd={() => setHeld(false)}
/>;