Recharts는 React 기반의 시각화 라이브러리로서, 사용자가 쉽게 다양한 종류의 차트를 생성하고 수정할 수 있도록 도와줍니다. Recharts를 사용하여 차트의 축 범위를 동적으로 조정하는 방법은 아래와 같습니다.

1. 데이터의 최소값과 최대값 계산하기: 데이터 배열의 모든 요소를 반복하면서 최소값과 최대값을 계산합니다. 이를 통해 차트에 표시될 데이터의 범위를 파악할 수 있습니다. 예를 들어, 데이터 배열에서 최소값을 min, 최대값을 max로 저장합니다.

2. 동적인 축 범위 설정하기: Recharts에서는 domain 속성을 사용하여 축의 범위를 설정할 수 있습니다. 해당 속성을 데이터의 최소값과 최대값으로 설정하면 동적으로 축 범위가 조정됩니다. 예를 들어, X축의 경우 <XAxis domain={[min, max]} />와 같이 설정할 수 있습니다. Y축의 경우 <YAxis domain={[min, max]} />와 같이 설정할 수 있습니다.

3. 차트 업데이트하기: 데이터의 변경 사항이 있을 때마다 차트를 업데이트해야 합니다. React에서는 상태(State)를 사용하여 데이터의 변경을 감지하고 화면을 업데이트할 수 있습니다. 따라서 데이터가 변경되면 차트를 다시 렌더링하도록 코드를 작성해야 합니다. 예를 들어, 데이터 배열이 data라는 상태로 관리된다면, 데이터가 변경될 때마다 <LineChart data={data} />와 같이 차트 컴포넌트를 다시 렌더링합니다.

이렇게 Recharts를 사용하여 차트의 축 범위를 동적으로 조정할 수 있습니다. 다른 차트 타입에 대해서도 유사한 방식으로 축 범위를 조정할 수 있으니 참고하시기 바랍니다.

참고 문서: Recharts 공식 문서