Implementing Zoom and Pan Interactivity

Demonstrates how to add zooming and panning functionality to a TanStack React Chart for enhanced interactivity, focusing on the use of built-in hooks and configurations.

import { Chart } from '@tanstack/react-chart';
import { useZoomPan } from '@tanstack/react-chart-zoom-pan';

Import the necessary modules from the TanStack React Chart and the zoom-pan package.

const MyChart = () => {
  const [zoomPanRef] = useZoomPan({
    // Configures zoom and pan
    scaleExtent: [1, 5], // Limits zoom level between 1x and 5x
    pan: true, // Enables panning
    zoom: true // Enables zooming
  });

  return (
    <Chart
      {...zoomPanRef.chartOptionsHook}
      options={ { /* Your chart options here */ } }
    />
  );
};

Create a chart component and apply the zoom and pan functionality using the useZoomPan hook. Configure the zoom limitations and enable both zooming and panning.