목록recharts (1)

늘 겸손하게

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

recharts를 활용하여 그래프를 만들었지만 배포한 웹 페이지를 모바일로 접속했을때 굉장히 보기 안좋은 그래프가 그려졌습니다. 하필 그래프가 그려질 컨테이너도 반응형 컨테이너로 설정해두어 가로축이 짧아지면 그래프의 모든 부분이 같이 짧아져버려 굉장히 보기 안좋은 그래프가 그려집니다. 이 때문에 노트북이나 데스크탑으로 접속했을때는 볼만하지만 모바일로 접속했을때는 끔찍한 그래프가 그려지게 되었습니다. 가로축이 넓은 기기로 접속했을때 모바일 버전 그래서 recharts의 레이아웃을 가로로 배치하여 세로축에 카테고리가, 가로축에 데이터 숫자가 배치되도록 했습니다. rechart 가로 레이아웃 설정법 recharts layout은 디폴트로 horizontal이므로 layout="vertical"를 추가하고 카테..
Programming/React 2022. 7. 8. 16:05
이전 Prev 1 Next 다음