Recharts에서 x와 y 축의 데이터 유형을 설정하는 방법은 dataKey 속성을 사용하여 간단히 설정할 수 있습니다. 이 속성은 각각의 데이터 포인트에서 x와 y 값을 추출하기 위해 사용됩니다.

아래의 예시를 통해 설명해보겠습니다.

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

const data = [
  { name: 'Jan', sales: 50 },
  { name: 'Feb', sales: 120 },
  { name: 'Mar', sales: 80 },
  { name: 'Apr', sales: 200 },
  { name: 'May', sales: 70 },
];

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

export default MyChart;

위의 코드에서 data 배열은 각 월별 판매량을 포함하고 있습니다. X축은 name 값을, Y축은 sales 값을 사용하도록 설정되어 있습니다.

LineChart 컴포넌트 내부에서 dataKey 속성을 사용하여 x와 y 값의 데이터 유형을 설정하였습니다. Line 컴포넌트에서는 dataKey 속성에 “sales”를 설정하여 Y축 데이터 유형을 설정하였고, XAxis에서는 “name”을 사용하여 X축 데이터 유형을 설정하였습니다.

이처럼 Recharts에서는 각각의 축마다 dataKey 속성을 사용하여 데이터 유형을 설정할 수 있습니다. 다른 유형의 차트를 사용할 경우에도 해당 차트에 맞게 dataKey 속성을 사용하여 데이터 유형을 지정할 수 있습니다.

더 많은 정보는 [Recharts 공식 문서][Recharts]를 참조하십시오.