[javascript] Recharts에서 커스텀 도구킷을 사용하는 방법은 무엇인가요?

01 Dec 2023

javascript

Recharts에서 커스텀 도구킷을 사용하는 방법은 다음과 같습니다:

Customized 컴포넌트를 생성합니다. 이 컴포넌트는 원하는 도구킷을 렌더링하는 역할을 합니다.

예를 들어, 다음은 단순한 커스텀 컴포넌트의 예시입니다:

import React from 'react';
import { Tooltip, TooltipProps } from 'recharts';

const CustomTooltip = (props: TooltipProps) => {
  const { active, payload } = props;

  if (active && payload && payload.length) {
    // 도구킷의 내용을 구성하는 로직을 작성합니다.
    // payload 데이터를 기반으로 원하는 형태로 도구킷을 구성합니다.
    return (
      <div>
        <p>{`Value: ${payload[0].value}`}</p>
      </div>
    );
  }

  return null;
};

export default CustomTooltip;

Recharts의 컴포넌트들 중에서 커스텀 도구킷을 사용할 컴포넌트를 선택합니다. 예를 들어, LineChart를 사용하고 싶다면 다음과 같이 커스텀 도구킷을 설정합니다:

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

const MyChart = () => {
  const data = [
    { x: 0, y: 10 },
    { x: 1, y: 20 },
    { x: 2, y: 30 },
    { x: 3, y: 40 },
    { x: 4, y: 50 },
  ];

  return (
    <LineChart width={400} height={300} data={data}>
      <XAxis dataKey="x" />
      <YAxis />
      <CartesianGrid stroke="#eee" strokeDasharray="5 5" />
      <Line type="monotone" dataKey="y" stroke="#8884d8" />
      <Tooltip content={<CustomTooltip />} /> {/* 커스텀 도구킷을 설정합니다 */}
    </LineChart>
  );
};

export default MyChart;

이제 LineChart에서 도구킷을 사용하면, CustomTooltip 컴포넌트의 렌더링 결과가 사용됩니다. 이를 수정하여 커스텀 도구킷을 사용하는 방법입니다.

추가적인 자세한 정보는 Recharts 공식 문서를 참고하시기 바랍니다.

참고 문서: Recharts 커스터마이징 가이드