[javascript] Recharts에서 차트의 특정 데이터 포인트에 대한 툴팁을 마우스 오버했을 때만 표시하는 방법은 무엇인가요?

01 Dec 2023

javascript

먼저, Recharts의 Tooltip 컴포넌트를 사용하여 툴팁을 생성합니다. 그런 다음, 다음과 같은 작업을 수행하여 특정 데이터 포인트에 대해서만 툴팁을 표시하게 할 수 있습니다.

Recharts에서 사용하는 데이터를 모두 가져옵니다.
Tooltip 컴포넌트의 content 속성을 함수로 설정합니다.
content 함수에서 데이터 포인트의 인덱스를 받아옵니다.
특정 데이터 포인트를 확인하여 해당 데이터 포인트에 대한 툴팁만 표시하도록 설정합니다.
그 외의 경우에는 null을 반환하여 툴팁을 숨깁니다.

아래는 이와 같은 기능을 구현한 예제 코드입니다.

import React from 'react';
import { LineChart, Line, XAxis, YAxis, Tooltip } from 'recharts';

const data = [
  { name: '1월', value: 100 },
  { name: '2월', value: 120 },
  { name: '3월', value: 90 },
  { name: '4월', value: 80 },
  { name: '5월', value: 110 },
];

const renderTooltipContent = (props) => {
  const { payload, label, active } = props;

  if (active && payload && payload.length) {
    const dataPoint = payload[0].payload;

    // 특정 데이터 포인트에 대한 툴팁 표시
    if (dataPoint.name === '2월') {
      return (
        <div className="custom-tooltip">
          <p>{`${label} : ${dataPoint.value}`}</p>
        </div>
      );
    }

    return null; // 그 외의 경우 툴팁 숨김
  }

  return null;
};

const Chart = () => {
  return (
    <LineChart width={400} height={300} data={data}>
      <XAxis dataKey="name" />
      <YAxis />
      <Tooltip content={renderTooltipContent} />
      <Line type="monotone" dataKey="value" stroke="#8884d8" strokeWidth={2} />
    </LineChart>
  );
};

export default Chart;

위 예제에서는 2월의 데이터 포인트에 대해서만 툴팁을 표시하고, 다른 데이터 포인트에 대해서는 숨김 처리하였습니다. 이를 기반으로 원하는 데이터 포인트에 대한 툴팁을 표시할 수 있을 것입니다.