1. Label 컴포넌트를 사용하여 데이터 레이블 표시하기: Recharts의 Label 컴포넌트를 사용하면 차트 내의 특정 위치에 데이터 값을 표시할 수 있습니다. 예를 들어, X축의 데이터 값 위에 데이터 레이블을 표시하려면 다음과 같이 코드를 작성할 수 있습니다.

   import { LineChart, Line, XAxis, YAxis, Label } from "recharts";
   
   const data = [
     { name: "A", value: 10 },
     { name: "B", value: 20 },
     { name: "C", value: 30 },
   ];
   
   const CustomLabel = ({ x, y, value }) => (
     <text x={x} y={y} dy={-4} fill="#888" textAnchor="middle">{value}</text>
   );
   
   const App = () => (
     <LineChart width={400} height={300} data={data}>
       <XAxis dataKey="name">
         <Label content={<CustomLabel />} position="insideBottom" />
       </XAxis>
       <YAxis />
       <Line type="monotone" dataKey="value" stroke="#8884d8" />
     </LineChart>
   );
   
   export default App;
   

   CustomLabel 컴포넌트를 정의하여Label 컴포넌트에 전달하고, position prop을 사용하여 데이터 레이블이 X축 위에 표시되도록 설정합니다.

2. ReferenceDot 컴포넌트를 사용하여 데이터 포인트 강조하기: Recharts의 ReferenceDot 컴포넌트를 사용하면 차트 내의 특정 데이터 포인트를 강조하여 표시할 수 있습니다. 예를 들어, 특정 값이 임계치를 초과하는 경우 해당 데이터 포인트를 강조하려면 다음과 같이 코드를 작성할 수 있습니다.

   import { LineChart, Line, XAxis, YAxis, ReferenceDot } from "recharts";
   
   const data = [
     { name: "A", value: 10 },
     { name: "B", value: 20 },
     { name: "C", value: 30 },
   ];
   
   const App = () => (
     <LineChart width={400} height={300} data={data}>
       <XAxis dataKey="name" />
       <YAxis />
       <Line type="monotone" dataKey="value" stroke="#8884d8" />
       <ReferenceDot x="B" y={20} stroke="red" fill="red" r={5} />
     </LineChart>
   );
   
   export default App;
   

   위의 코드에서 ReferenceDot 컴포넌트를 사용하여 x와 y prop을 이용하여 표시하려는 데이터 포인트의 위치를 설정합니다. stroke, fill, r 등의 prop을 사용하여 원하는 스타일을 지정할 수 있습니다.

Recharts는 다양한 커스터마이즈 가능한 컴포넌트를 제공하여 차트에 데이터를 표시하는 방법을 확장할 수 있습니다. Recharts 공식 문서를 참조하여 필요한 컴포넌트를 선택하고 사용법을 자세히 알아보시기 바랍니다.

참고문헌:

• Recharts 공식 문서