1. 축 레이블 사용하기

Recharts에서는 축 레이블을 사용하여 차트에 단위를 표시할 수 있습니다. 축 레이블은 차트의 x축 또는 y축에 배치되며, 단위를 명시적으로 보여줄 수 있습니다.

import { XAxis, YAxis } from "recharts";

// x축에 단위 표시하기
<XAxis dataKey="date" label={{ value: "일자", position: "insideBottom", offset: -10 }} />
// y축에 단위 표시하기
<YAxis label={{ value: "값", position: "insideLeft", angle: -90, offset: 10 }} />

위 예제에서 XAxis와 YAxis에 label 속성을 사용하여 각각 x축과 y축에 단위를 표시합니다.

2. 툴팁 사용하기

Recharts는 툴팁 기능을 제공합니다. 툴팁은 차트에서 마우스를 올렸을 때 해당 값 또는 데이터를 표시해줍니다. 툴팁을 사용하면 차트 요소에 단위를 포함하여 값을 표시할 수 있습니다.

import { Tooltip } from "recharts";

<Tooltip labelFormatter={(value) => `${value} 일자`} formatter={(value) => `${value} 단위`} />

위 예제에서 Tooltip에 labelFormatter와 formatter 속성을 사용하여 x축과 y축의 단위를 설정합니다.

3. 커스텀 렌더링

Recharts에서는 커스텀 렌더링을 사용하여 차트에 단위 또는 값을 직접 그릴 수 있습니다. 이를 통해 개발자는 차트의 모든 요소를 완전히 제어할 수 있습니다.

import { CartesianGrid, Line, XAxis, YAxis } from "recharts";

// 커스텀 렌더링 함수
const CustomLabel = ({ x, y, value }) => {
  return (
    <text x={x} y={y} fill="black" textAnchor="middle">
      {`${value} 단위`}
    </text>
  );
};

<Line dataKey="value" dot={<CustomLabel />} />

위 예제에서 CustomLabel 컴포넌트를 사용하여 차트에 값을 직접 그립니다. 이 예제에서는 선 그래프에 단위를 표시하고 있습니다.

Recharts는 다양한 방법으로 차트에 단위 또는 값의 크기를 표시할 수 있습니다. 위의 예시들은 이를 실현하는 몇 가지 방법을 보여주고 있습니다. Recharts의 공식 문서(https://recharts.org/)를 참조하여 더 많은 기능과 사용 방법을 알아볼 수 있습니다.