Pan/Zoom

The CartesianChart and PolarChart components have opt-in support for "pan/zoom" gestures simply by using the useChartTransformState hook.

useChartTransformState

The useChartTransformState hook provides the necessary state management for pan and zoom gestures. It returns an object with a state property that contains:

{
  state: {
    panActive: SharedValue<boolean>; // Whether a pan gesture is currently active
    zoomActive: SharedValue<boolean>; // Whether a zoom gesture is currently active
    origin: SharedValue<{ x: number; y: number }>; // The origin point for transformations
    matrix: SharedValue<Matrix4>; // The current transformation matrix
    offset: SharedValue<Matrix4>; // The offset transformation matrix
  };
}

Basic Usage

To enable pan and zoom gestures on a chart, pass the transform state to the chart's transformState prop:

import { CartesianChart, useChartTransformState } from "victory-native";

function MyChart() {
  const transformState = useChartTransformState();

return (
  <CartesianChart
      transformState={transformState}
      // ... other props
    >
      {/* chart content */}
    </CartesianChart>
  )
}

Configuration

You can customize the pan gesture behavior using the transformConfig prop:

<CartesianChart
  transformState={state}
  transformConfig={{
    pan: {
      activateAfterLongPress: 100, // Delay in ms before pan gesture activates
    },
  }}
>
  {/* chart content */}
</CartesianChart>

Utility Functions

Several utility functions are available to help work with chart transformations:

getTransformComponents

Extracts the scale and translation components from a transformation matrix:

const { scaleX, scaleY, translateX, translateY } = getTransformComponents(matrix);

setScale

Updates the scale components of a transformation matrix:

// Set uniform scale
const newMatrix = setScale(matrix, 2.0); // scales both X and Y by 2.0

// Set different X and Y scales
const newMatrix = setScale(matrix, 2.0, 1.5); // scaleX = 2.0, scaleY = 1.5

setTranslate

Updates the translation components of a transformation matrix:

const newMatrix = setTranslate(matrix, 100, 50); // moves 100 units in X, 50 in Y

These utility functions are particularly useful when you need to programmatically modify chart transformations or read the current transformation state.