[javascript] Recharts에서 툴팁의 위치와 스타일을 변경하는 방법은 무엇인가요?

01 Dec 2023

javascript

첫째로, 툴팁의 위치를 변경하기 위해 tooltipPosition과 cursor 속성을 사용할 수 있습니다. tooltipPosition은 툴팁이 데이터 요소 위 또는 아래에 표시되는 위치를 결정합니다. 값으로 “top”, “left”, “right”, “bottom”을 사용할 수 있습니다. cursor는 마우스 포인터가 요소 위에 있을 때 표시되는 커서를 결정합니다. “auto”, “crosshair”, “default” 등의 값을 사용할 수 있습니다.

다음으로, 툴팁의 스타일을 변경하기 위해 tooltip 속성을 사용할 수 있습니다. 이 속성을 사용하면 툴팁의 배경색, 테두리, 글꼴 크기 등 많은 스타일 속성을 설정할 수 있습니다.

아래는 Recharts에서 툴팁의 위치와 스타일을 변경하는 예시 코드입니다.

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

const data = [
  { name: 'A', value: 10 },
  { name: 'B', value: 20 },
  { name: 'C', value: 30 },
  { name: 'D', value: 40 },
  { name: 'E', value: 50 },
];

const CustomTooltip = ({ active, payload, label }) => {
  if (active && payload && payload.length) {
    return (
      <div className="custom-tooltip">
        <p className="label">{`${label} : ${payload[0].value}`}</p>
      </div>
    );
  }

  return null;
};

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

export default App;

위의 예시 코드에서 CustomTooltip 컴포넌트를 사용하여 툴팁의 커스텀 내용을 정의했습니다. custom-tooltip 클래스를 가진 div 요소 내에서 원하는 스타일을 적용할 수 있습니다. Tooltip 컴포넌트에서 content 속성을 사용하여 CustomTooltip 컴포넌트를 전달합니다.

위의 코드는 툴팁의 위치를 변경하거나 스타일을 수정하는 기본적인 방법을 제공합니다. 필요에 따라 수정하고 추가 스타일을 적용하여 원하는 결과를 얻을 수 있습니다.

참고 자료:

Recharts 공식 문서