React - recharts vertical layout ( recharts 수직 레이아웃 )

recharts를 활용하여 그래프를 만들었지만 배포한 웹 페이지를 모바일로 접속했을때 굉장히 보기 안좋은 그래프가 그려졌습니다.

 

하필 그래프가 그려질 컨테이너도 반응형 컨테이너로 설정해두어 가로축이 짧아지면 그래프의 모든 부분이 같이 짧아져버려 굉장히 보기

 

안좋은 그래프가 그려집니다.

 

이 때문에 노트북이나 데스크탑으로 접속했을때는 볼만하지만 모바일로 접속했을때는 끔찍한 그래프가 그려지게 되었습니다.

 

 

가로축이 넓은 기기로 접속했을때

그럭저럭 볼만한 그래프

 

모바일 버전

...

 

그래서 recharts의 레이아웃을 가로로 배치하여 세로축에 카테고리가, 가로축에 데이터 숫자가 배치되도록 했습니다.

 

 

rechart 가로 레이아웃 설정법

 

recharts layout은 디폴트로 horizontal이므로 layout="vertical"를 추가하고 카테고리를 y축으로, 데이터 숫자는 x축으로 설정할것을 명시해주어야합니다.

출처 : https://recharts.org/en-US/api/BarChart#layout

layout default는 'horizontal'이므로 'vertical'로 명시해야함

 

  코드

 

주의할점은 X축의 type="number", Y축에 type="category"를 꼭 명시하여야 그래프가 가로로 그려집니다