[javascript] Recharts에서 마우스 오버 이벤트를 활용하는 방법은 무엇인가요?

01 Dec 2023

javascript

Recharts는 React 기반의 데이터 시각화 라이브러리로, 다양한 차트를 쉽게 만들 수 있는 기능을 제공합니다. Recharts를 사용하여 마우스 오버 이벤트를 활용하는 방법은 다음과 같습니다.

onMouseEnter 이벤트 속성을 사용하여 마우스가 차트 요소 위로 이동할 때 발생하는 이벤트를 처리할 수 있습니다.

import { LineChart, Line, Tooltip } from 'recharts';

const data = [
  { name: 'Jan', value: 100 },
  { name: 'Feb', value: 200 },
  { name: 'Mar', value: 150 },
  // ...
];

const MyChart = () => {
  const handleMouseEnter = (data) => {
    console.log('마우스가 차트 요소 위로 이동했습니다:', data);
    // 원하는 작업을 수행할 수 있습니다.
  };

  return (
    <LineChart width={400} height={300} data={data}>
      <Line type="monotone" dataKey="value" stroke="#8884d8" />
      <Tooltip />
      <Line
        type="monotone"
        dataKey="value"
        stroke="#8884d8"
        dot={{ onMouseEnter: handleMouseEnter }}
      />
    </LineChart>
  );
};

export default MyChart;

위의 예시 코드에서는 LineChart와 Line 요소를 사용하여 그래프를 생성하고, Tooltip을 추가하여 마우스 호버 시에 툴팁이 표시되도록 설정했습니다. 그리고 Line 요소에 dot 속성을 추가하고, 해당 속성에 onMouseEnter 이벤트 핸들러를 등록했습니다.

handleMouseEnter 함수에서는 마우스가 차트 위로 이동할 때마다 호출되며, 해당 위치의 데이터를 인자로 받아와 원하는 작업을 수행할 수 있습니다.

위의 예시 코드에서는 간단히 console.log로 데이터를 출력하였지만, 원하는 작업을 수행할 수 있도록 수정하면 됩니다.

이렇게 Recharts를 사용하여 마우스 오버 이벤트를 처리할 수 있으며, 요구에 맞게 데이터를 활용하여 다양한 작업을 구현할 수 있습니다.

참조:

Recharts 공식 문서: https://recharts.org/
React 공식 문서: https://reactjs.org/