1. Recharts에서 onClick prop을 사용하여 데이터 클릭 이벤트를 처리합니다. 예를 들어, <BarChart> 컴포넌트의 경우 다음과 같이 onClick prop에 콜백 함수를 전달합니다.

<BarChart width={500} height={300} data={data} onClick={handleDataClick}>
  // 차트 구성 요소들...
</BarChart>

1. 클릭 이벤트를 처리하는 handleDataClick 함수를 정의합니다. 이 함수에서는 클릭한 데이터에 대한 작업을 수행하고, 페이지 이동이 필요하다면 해당 동작을 구현합니다.

const handleDataClick = (data, index) => {
  // 클릭한 데이터에 대한 작업 수행
  console.log("Clicked data:", data);

  // 다른 페이지로 이동하는 예시
  window.location.href = "/otherpage";
};

1. handleDataClick 함수에서 다른 페이지로 이동하려면, window.location.href를 사용하여 해당 페이지의 URL로 리다이렉트할 수 있습니다. 위의 예시에서는 “/otherpage”로 이동하는 예시를 보여주었습니다.

이제 Recharts를 사용하여 차트의 특정 데이터를 클릭하고 다른 페이지로 이동하거나 추가 액션을 수행할 수 있습니다. 이를 활용하여 사용자에게 더 풍부한 경험을 제공할 수 있습니다.

참고 자료:

• Recharts 공식 문서
• MDN 문서 - window.location