[javascript] Recharts에서 데이터 라벨을 추가하는 방법은 무엇인가요?

01 Dec 2023

javascript

데이터 라벨을 추가하는 방법에는 두 가지가 있습니다. 첫 번째 방법은 label prop을 사용하는 것이고, 두 번째 방법은 <CartesianGrid> 컴포넌트 내부에서 <Tooltip> 컴포넌트를 사용하는 것입니다.

먼저, label prop을 사용하는 방법을 살펴보겠습니다. <Bar>, <Line>, <Area> 등의 차트 컴포넌트에 label prop을 추가하고, 해당 데이터 라벨을 표시할 텍스트를 설정할 수 있습니다. 예를 들면 다음과 같습니다:

import { BarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip } from 'recharts';

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

<BarChart width={500} height={300} data={data}>
  <CartesianGrid strokeDasharray="3 3" />
  <XAxis dataKey="name" />
  <YAxis />
  <Tooltip />
  <Bar dataKey="value" label={{ position: 'top' }} />
</BarChart>

위의 예제에서 <Bar> 컴포넌트에 label prop을 사용하여 데이터 값 위에 라벨을 표시하도록 설정하였습니다. position prop을 이용하여 라벨의 위치를 조정할 수 있습니다.

두 번째 방법은 <CartesianGrid> 컴포넌트 내부에서 <Tooltip> 컴포넌트를 사용하여 데이터 라벨을 추가하는 것입니다. 아래 예제를 참고하세요:

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

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

<LineChart width={500} height={300} data={data}>
  <XAxis dataKey="name" />
  <YAxis />
  <CartesianGrid />
  <Tooltip labelFormatter={value => `Value: ${value}`} />
  <Line type="monotone" dataKey="value" stroke="#8884d8" />
</LineChart>

위의 예제에서 <Tooltip> 컴포넌트의 labelFormatter prop을 사용하여 데이터 라벨을 설정합니다. labelFormatter prop은 라벨의 포맷을 지정하는 함수를 받습니다. 위 예제에서는 “Value: 10”과 같이 데이터 값 앞에 “Value: “를 추가하여 라벨을 표시하도록 설정하였습니다.

위의 두 가지 방법을 사용하여 Recharts에서 데이터 라벨을 추가할 수 있습니다. 자세한 내용은 Recharts의 공식 문서를 참고하세요.