1. X축 설정: X축은 주로 데이터의 시간, 날짜 또는 범주값을 표시하는 데 사용됩니다. XAxis 구성 요소를 사용하여 X축을 설정할 수 있습니다. dataKey prop에는 데이터에서 X값을 나타내는 키를 지정합니다. 예를 들어, dataKey="date"로 설정하면 데이터 객체의 date 속성을 기반으로 X축이 생성됩니다.

<XAxis dataKey="date" />

1. Y축 설정: Y축은 데이터의 수치값을 표시하는 데 사용됩니다. YAxis 구성 요소를 사용하여 Y축을 설정할 수 있습니다. dataKey prop에는 데이터에서 Y값을 나타내는 키를 지정합니다. 예를 들어, dataKey="temperature"으로 설정하면 데이터 객체의 temperature 속성을 기반으로 Y축이 생성됩니다.

<YAxis dataKey="temperature" />

1. 축 레이블 및 스타일링: Label 구성 요소를 사용하여 축에 레이블을 추가하고 스타일을 지정할 수 있습니다. label prop에는 축의 레이블 텍스트를 지정하고, offset prop에는 레이블의 위치를 조절합니다.

<XAxis>
  <Label value="날짜" offset={0} position="insideBottom" />
</XAxis>

<YAxis>
  <Label value="온도" offset={-10} position="insideLeft" angle={-90} />
</YAxis>

1. 축 틱 설정: 축 틱은 축 위에 나타나는 작은 선분으로, 데이터 값을 시각적으로 나타내는 역할을 합니다. Tick 구성 요소를 사용하여 축 틱을 설정할 수 있습니다. tick prop에는 축 틱에 대한 설정을 지정합니다. 예를 들어, tick={{ stroke: 'red', strokeWidth: 2 }}로 설정하면 모든 축 틱의 색상을 빨간색으로, 선 두께를 2로 지정할 수 있습니다.

<XAxis>
  <Tick stroke="red" strokeWidth={2} />
</XAxis>

이렇게 Recharts를 사용하여 축을 구성할 수 있습니다. 축의 레이블, 틱의 스타일 등을 조정하여 원하는 시각화를 만들어보세요.

자세한 정보는 Recharts 공식 문서를 참조하세요:

• Recharts 공식 문서