[javascript] Recharts에서 특정 데이터 포인트에 대한 추가 정보를 표시하기 위해 커스텀 툴팁을 사용하는 방법은 무엇인가요?

01 Dec 2023

javascript

Recharts에서 커스텀 툴팁을 사용하려면 다음 단계를 따르세요:

Recharts를 프로젝트에 설치합니다. 다음 명령을 사용하여 설치할 수 있습니다:

npm install recharts

다음과 같이 Tooltip 컴포넌트를 사용하여 커스텀 툴팁을 생성합니다:

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

const CustomTooltip = ({ active, payload, label }) => {
  if (active && payload && payload.length) {
    // 툴팁에 표시할 내용을 정의합니다
    const data = payload[0].payload;
    return (
      <div className="custom-tooltip">
        <p className="label">{`${label} : ${data.value}`}</p>
        <p className="intro">{data.introduction}</p>
      </div>
    );
  }

  return null;
};

const Chart = () => {
  const data = [
    { name: 'A', value: 10, introduction: 'This is data A' },
    { name: 'B', value: 20, introduction: 'This is data B' },
    { name: 'C', value: 30, introduction: 'This is data C' },
    // ...
  ];

  return (
    <LineChart width={400} height={300} data={data}>
      <XAxis dataKey="name" />
      <YAxis />
      <CartesianGrid strokeDasharray="3 3" />
      <Tooltip content={<CustomTooltip />} />
      <Line type="monotone" dataKey="value" stroke="#8884d8" />
    </LineChart>
  );
};

export default Chart;

CustomTooltip 컴포넌트애서는 active, payload, label을 파라미터로 받습니다. active는 마우스 오버 상태인지를 나타내며, payload는 현재 선택된 데이터에 대한 정보입니다. label은 현재 선택된 축의 값을 나타냅니다.
Tooltip 컴포넌트에서 content props를 사용하여 CustomTooltip 컴포넌트를 지정합니다. 이를 통해 커스텀 툴팁을 사용할 수 있습니다.

위 예제에서는 간단한 커스텀 툴팁을 생성하는 방법을 보여주었습니다. 원하는대로 UI를 꾸밀 수 있으며, payload를 통해 데이터 포인트의 다른 속성을 사용할 수도 있습니다.

더 자세한 내용은 Recharts 공식 문서를 참조하시면 도움이 될 것입니다.