Recharts에서 커스텀 레이블을 추가하는 방법은 크게 세 가지로 나눌 수 있습니다:

1. Label 컴포넌트 사용하기: Recharts에서 제공하는 Label 컴포넌트를 사용하면 각각의 데이터 포인트에 커스텀 레이블을 추가할 수 있습니다. 데이터 포인트마다 다른 텍스트를 표시할 수도 있습니다. 예를 들어, 아래의 코드에서는 bar 차트의 각 막대에 해당하는 데이터의 name 속성을 레이블로 표시합니다.

   import { BarChart, Bar, XAxis, YAxis, CartesianGrid, Label } from 'recharts';
   
   const data = [
     { name: 'A', value: 10 },
     { name: 'B', value: 20 },
     { name: 'C', value: 30 },
   ];
   
   const CustomBarLabel = ({ x, y, width, value }) => (
     <text x={x + width / 2} y={y - 10} textAnchor="middle" dominantBaseline="middle">
       {value}
     </text>
   );
   
   const CustomBarChart = () => (
     <BarChart width={400} height={300} data={data}>
       <CartesianGrid strokeDasharray="3 3" />
       <XAxis dataKey="name" />
       <YAxis />
       <Bar dataKey="value" fill="#8884d8" label={<CustomBarLabel />} />
     </BarChart>
   );
   

   위의 예시에서 CustomBarLabel 컴포넌트는 Bar 컴포넌트의 label prop으로 전달됩니다. CustomBarLabel 컴포넌트는 막대의 중앙에 레이블을 표시하도록 설정되어 있습니다.

2. LabelList 컴포넌트 사용하기: Label 컴포넌트는 특정 데이터 포인트에 대한 레이블을 추가하는데 사용됩니다. 하지만 모든 데이터 포인트에 대해 동일한 레이블을 추가하거나, 특정 조건에 맞는 데이터 포인트에만 레이블을 추가하려면 LabelList 컴포넌트를 사용할 수 있습니다. 예를 들어, 아래의 코드에서는 line 차트의 데이터 포인트에 수평선 위에 레이블을 표시합니다.

   import { LineChart, Line, XAxis, YAxis, CartesianGrid, LabelList } from 'recharts';
   
   const data = [
     { name: 'A', value: 10 },
     { name: 'B', value: 20 },
     { name: 'C', value: 30 },
   ];
   
   const CustomLineLabel = ({ x, y, value }) => (
     <text x={x} y={y - 10} textAnchor="middle" dominantBaseline="middle">
       {value}
     </text>
   );
   
   const CustomLineChart = () => (
     <LineChart width={400} height={300} data={data}>
       <CartesianGrid strokeDasharray="3 3" />
       <XAxis dataKey="name" />
       <YAxis />
       <Line dataKey="value" stroke="#8884d8">
         <LabelList dataKey="value" position="top" content={<CustomLineLabel />} />
       </Line>
     </LineChart>
   );
   

   위의 예시에서 CustomLineLabel 컴포넌트는 LabelList 컴포넌트의 content prop으로 전달됩니다. LabelList 컴포넌트는 데이터 포인트의 value 값을 레이블로 표시하도록 설정되어 있습니다.

3. CSS로 레이블 스타일링하기: Recharts의 많은 컴포넌트들은 레이블을 내장하고 있습니다. 이러한 컴포넌트들의 레이블은 CSS를 사용하여 스타일링할 수 있습니다. 예를 들어, 아래의 코드는 pie 차트의 섹션 레이블을 CSS로 스타일링하는 방법을 보여줍니다.

   import { PieChart, Pie, Label } from 'recharts';
   
   const data = [
     { name: 'A', value: 10 },
     { name: 'B', value: 20 },
     { name: 'C', value: 30 },
   ];
   
   const CustomPieChart = () => (
     <PieChart width={400} height={300}>
       <Pie dataKey="value" data={data} label>
         {data.map((entry, index) => (
           <Label key={index} position="center">
             {entry.name}
           </Label>
         ))}
       </Pie>
     </PieChart>
   );
   

   위의 예시에서 Label 컴포넌트는 pie 차트의 섹션 레이블을 표시합니다. 각 섹션의 name 속성 값이 레이블로 표시되도록 설정되어 있습니다.

위의 세 가지 방법을 사용하여 Recharts에서 커스텀 레이블을 추가할 수 있습니다. 각각의 방법은 다양한 차트 유형에 적용될 수 있으며, 원하는 결과물에 맞게 선택하여 사용하면 됩니다.