Adding Zoom and Pan Interactivity to Charts

import { Chart } from 'react-charts';
import React, { useState } from 'react';
function MyChart() {
  const [zoomState, setZoomState] = useState({ scaleX: 1, scaleY: 1, translateX: 0, translateY: 0 });

  const handleZoom = (deltaScale, event) => {
    setZoomState(prevState => {
      const newScaleX = prevState.scaleX * deltaScale;
      const newScaleY = prevState.scaleY * deltaScale;
      return { ...prevState, scaleX: newScaleX, scaleY: newScaleY };
    });
  };

  const handlePan = (deltaX, deltaY) => {
    setZoomState(prevState => {
      const newTranslateX = prevState.translateX + deltaX;
      const newTranslateY = prevState.translateY + deltaY;
      return { ...prevState, translateX: newTranslateX, translateY: newTranslateY };
    });
  };

  // Add your chart options and data

  return (
    <div onWheel={(e) => handleZoom(e.deltaY * -0.01, e)}
         onMouseMove={(e) => e.buttons === 1 && handlePan(e.movementX, e.movementY)}>
      <Chart /* your chart configuration here, injecting zoomState properties as needed */ />
    </div>
  );
}