하이차트(highcharts)를 부트스트랩(bootstrap)과 같이 쓸때 차트의 넓이가 잘못 계산되어서 오버플로우가 발생하는 문제가 있습니다. 내용과 해결책을 간단하게 공유합니다.

문제

차트의 넓이가 커져서 좌우로 스크롤바가 생겼습니다

아파트실거래가차트 프로젝트에 하이차트를 사용했는데, 차트가 상위 컨테이너 div크기보다 크게 그려지길게 검색을 좀 해보니 관련해서 문제가 좀 있는것 같습니다. 깊게 알아보지는 않았고, 간단한 우회해결책(workaround)이 있길래 적용해서 해결했습니다.

해결방법

차트의 reflow 메소드를 호출해 주면 됩니다.

var chart1 = new Highcharts.Chart(config);
chart1.reflow(); //해결방법 

참고 : Chart size doesn't auto-fit when using with ui-bootstrap #211

하이차트 성능도 좋고 사용하기도 좋습니다. 정리도 매우 잘되어 있습니다. 다만, 개인 사용만 무료이기 때문에 사용에 제한은 있습니다.