[javascript] Recharts에서 차트의 특정 막대를 클릭하거나 마우스오버 했을 때 해당 데이터 포인트를 강조하는 방법은 무엇인가요?

01 Dec 2023

javascript

먼저, Recharts의 BarChart 컴포넌트를 사용하여 막대 차트를 생성합니다. 그런 다음 차트 내부의 특정 막대를 클릭하거나 마우스오버 했을 때 이벤트를 감지하도록 onBarClick 또는 onMouseEnter, onMouseLeave 등의 이벤트 핸들러를 정의합니다.

import React from 'react';
import { BarChart, Bar, CartesianGrid, XAxis, YAxis } from 'recharts';

const data = [
  { name: 'A', value: 10 },
  { name: 'B', value: 20 },
  { name: 'C', value: 15 },
];

const ExampleChart = () => {
  const handleBarClick = (data, index) => {
    // 클릭한 막대의 데이터 또는 인덱스에 대한 처리 로직을 작성합니다.
    console.log('Clicked bar data:', data);
    console.log('Clicked bar index:', index);
  };

  const handleMouseEnter = (data, index) => {
    // 마우스가 막대 위에 올라간 경우에 대한 처리 로직을 작성합니다.
    console.log('Mouse enter bar data:', data);
    console.log('Mouse enter bar index:', index);
  };

  const handleMouseLeave = () => {
    // 마우스가 막대에서 벗어난 경우에 대한 처리 로직을 작성합니다.
    console.log('Mouse leave bar');
  };

  return (
    <BarChart width={400} height={300} data={data}>
      <Bar
        dataKey="value"
        onClick={handleBarClick}
        onMouseEnter={handleMouseEnter}
        onMouseLeave={handleMouseLeave}
      />
      <CartesianGrid strokeDasharray="3 3" />
      <XAxis dataKey="name" />
      <YAxis />
    </BarChart>
  );
};

export default ExampleChart;

위의 예제에서는 막대 차트를 생성하고, onBarClick, onMouseEnter, onMouseLeave 이벤트 핸들러를 정의하여 각각 막대 클릭, 마우스오버, 마우스리브 이벤트를 처리하도록 설정하였습니다. 이벤트 핸들러에서는 해당 막대의 데이터 또는 인덱스에 대한 처리 로직을 작성할 수 있습니다.

실행하면 막대 차트가 표시되고, 막대를 클릭하거나 마우스를 막대 위로 올리거나 벗어날 때 콘솔에 해당 데이터 또는 인덱스가 출력됩니다.

추가적으로, 막대를 강조하는 방법은 사용자 인터페이스에 따라 다를 수 있으며, Recharts에서 제공하는 기본적인 스타일링 속성을 활용하거나 커스텀 CSS 스타일을 사용할 수 있습니다. 필요에 따라 스타일을 변경하여 막대를 강조하고 시각적으로 구분할 수 있습니다.

이 외에도 Recharts에서는 다양한 차트 유형과 설정 옵션을 제공하므로 필요에 따라 문서를 참고하고 활용할 수 있습니다.

참고 문서:

Recharts 공식 문서: https://recharts.org/
Recharts 예제 및 사용법: https://recharts.org/examples