Snap when panning charts

[marcoshernanz]

Is there a way to snap to the points when panning the chart?

Similar to snapToInterval in React Native's FlatList component.

[marcoshernanz]

To anyone wanting the same functinality, this might do the trick:

  const xPan = useSharedValue(0);

  useAnimatedReaction(
    () => transformState.panActive.value,
    (currentValue, previousValue) => {
      if (currentValue !== previousValue) {
        const { translateX } = getTransformComponents(
          transformState.matrix.value,
        );

        xPan.value = translateX;

        const interval = width / numDots;
        const minPan = 0;
        const maxPan = interval * (data.length - numDots - 1);
        const translate = minPan + Math.round(xPan.value / interval) * interval;
        const fixedTranslate = Math.max(minPan, Math.min(maxPan, translate));

        xPan.value = withTiming(fixedTranslate);
      }
    },
  );

  useAnimatedReaction(
    () => xPan.value,
    (xPan) => {
      transformState.matrix.value = setTranslate(
        transformState.matrix.value,
        xPan,
        0,
      );
    },
  );

It would be nice for this be implmented as a simple prop for the CartesianChart component.