[Recharts + typescript] 리차트(recharts)에서 height 고정값 쓰지 않는 법

리액트 리차트(recharts)를 사용하기 위해서는 해당 라이브러리에서 제공하는

<ResponsiveContainer>라는 반응형 콘테이너로 그래프를 감싸주어야 하는데 (안 감싸주면 에러 뱉음)

이 때 height를 고정값(ex. 10rem, 200px)으로 줘야 그래프가 나타나는 현상이 있었다.

 

 

위 캡쳐에서 텍스트 삐져나옴 현상은 그래프 높이를 10rem으로 고정했기 때문에 발생하고 있다.

<Box height='10rem'>
	<ResponsiveContainer>
	...
   	</ResponsiveContainer>
</Box>

 

여기서 ResponsiveContainer를 감싸고 있는 고정 높이 10rem을 빼고,

해당 컴포넌트에 aspect={1}을 추가하면 아래와 같이 잘 출력된다.

<Box>
	<ResponsiveContainer aspect={1}>
    	...
   	</ResponsiveContainer>
</Box>