Built-in Zoom/Pinch Support for LineChart with Focal Point Tracking

[DeanGracey]

It would be valuable to have built-in zoom functionality for LineChart that allows users to zoom in/out while maintaining focus on a specific point in the chart. Currently, implementing this externally leads to synchronization issues between scroll position tracking and spacing updates.

Use Case

We're building a progress tracking feature where users need to:
View an overview of their data over time
Zoom in on specific time periods to see details
Pan around the zoomed chart
Have the zoom centered on where they're touching (focal point zoom)

Current Limitations

While the LineChart supports dynamic spacing prop changes and exposes scrollRef, implementing smooth zoom behavior externally is challenging due to:
Race conditions between onScroll callbacks and programmatic scrollTo() calls
Timing issues when spacing state updates don't synchronize with scroll position updates
Cumulative gesture translation values causing incorrect calculations over multiple zoom steps

What We Attempted

We tried implementing zoom using gesture handlers with focal point tracking:

export const ProgressChart = ({ data }: ProgressChartProps) => {
  const [spacing, setSpacing] = useState(20);
  const scrollRef = useRef<ScrollView>(null);
  const scrollOffsetRef = useRef(0);
  const lastTranslationYRef = useRef(0);
  const isZoomingRef = useRef(false);

  const updateZoom = (delta: number, touchX: number) => {
    const currentScrollX = scrollOffsetRef.current;

    setSpacing((prevSpacing) => {
      const newSpacing = Math.max(10, Math.min(100, prevSpacing + delta));
      const spacingRatio = newSpacing / prevSpacing;

      // Calculate the point in chart coordinates that the user is touching
      const chartPointX = currentScrollX + touchX;
      
      // Calculate where that point will be after zoom
      const newChartPointX = chartPointX * spacingRatio;
      
      // Calculate new scroll position to keep the touch point stationary
      const newScrollX = newChartPointX - touchX;

      // Update scroll offset manually to avoid race conditions
      const clampedScrollX = Math.max(0, newScrollX);
      scrollOffsetRef.current = clampedScrollX;
      scrollRef.current?.scrollTo({ x: clampedScrollX, animated: false });

      return newSpacing;
    });
  };

  const panGesture = Gesture.Pan()
    .onStart(() => {
      lastTranslationYRef.current = 0;
      isZoomingRef.current = true;
    })
    .onUpdate((event) => {
      // Calculate incremental delta to avoid cumulative errors
      const currentTranslation = event.translationY;
      const incrementalDelta = -(currentTranslation - lastTranslationYRef.current) / 10;
      lastTranslationYRef.current = currentTranslation;
      
      runOnJS(updateZoom)(incrementalDelta, event.x);
    })
    .onEnd(() => {
      lastTranslationYRef.current = 0;
      isZoomingRef.current = false;
    });

  return (
    <GestureDetector gesture={panGesture}>
      <View collapsable={false}>
        <LineChart
          data={data}
          spacing={spacing}
          scrollRef={scrollRef}
          onScroll={(event) => {
            // Block updates during active zoom to prevent race conditions
            if (!isZoomingRef.current) {
              scrollOffsetRef.current = event.nativeEvent.contentOffset.x;
            }
          }}
          // ... other props
        />
      </View>
    </GestureDetector>
  );
};

Problems Encountered

Race Conditions: When calling scrollTo() programmatically, the onScroll callback fires and updates our tracked scroll position, but this happens asynchronously and can interfere with subsequent zoom calculations.

State Synchronization: React state updates for spacing are batched, but scroll position updates are immediate, causing visual glitches where the chart renders with mismatched spacing and scroll values.

Data Loss: During rapid zoom gestures, data on the edges of the chart can disappear or become inaccessible, requiring complex manual scroll position management.

Gesture Conflicts: Wrapping the chart in a GestureDetector can interfere with the chart's built-in pan/scroll gestures.

Proposed Solution

Built-in zoom support that handles:
Pinch-to-zoom gestures for intuitive mobile UX
Vertical pan for zoom as an alternative (similar to Google Maps on mobile)
Focal point tracking - zoom toward the point being touched
Configurable zoom limits (min/max spacing or scale)
Smooth animations with proper state synchronization

Suggested API

<LineChart
data={data}
// Existing props...

// New zoom props
enableZoom={true}
zoomType="pinch" // or "vertical-pan" or "both"
minSpacing={10}
maxSpacing={100}
initialSpacing={20}
onZoomChange={(newSpacing: number) => {
// Optional callback for external state tracking
}}
/>

Alternative Workarounds?

If built-in zoom support isn't feasible, guidance on:
How to properly synchronize external spacing changes with scroll position
Whether there's a way to batch scroll + spacing updates atomically
Best practices for implementing zoom without race conditions

Environment
react-native-gifted-charts: 1.4.66
react-native: 0.79.5
react-native-gesture-handler: ~2.24.0
react-native-reanimated: ~3.19.2