Highcharts error #13

Highcharts error #13Uncaught Error: Highcharts error #13: www.highcharts.com/errors/13
at a.Chart.u (highcharts.src.js:434)
at Object.a.fireEvent (highcharts.src.js:2365)
at Object.a.error (highcharts.src.js:442)
at a.Chart.getContainer (highcharts.src.js:24494)
at a.Chart.firstRender (highcharts.src.js:25343)
at a.Chart. (highcharts.src.js:23882)
at a.fireEvent (highcharts.src.js:2365)
at a.Chart.init (highcharts.src.js:23756)
at a.Chart.getArgs (highcharts.src.js:23730)
at new a.Chart (highcharts.src.js:23669)

highchart를 그릴때 위와 같은 에러가 발생했는데 정확한 이유를 몰라 원인을 오랬동안 삽질하며 찾았다. 나의 경우 원인은 highchart관련한 라이브러리(highcharts.js)가 로딩되기 전에 chart를 그리려고 했기 때문이다. 해결 방법은 chart 작성 코드를 라이브러리가 로딩된 후에 실행되도록 작성하면 된다. 즉 jQuery의 $(document).ready(function() {}); 안에 highchart 코드를 작성하면 된다.

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>

<script language="javascript">
$(document).ready(function() {
	// highchart 코드
  var chart = Highcharts.chart('container', {
    ...    
  });

});
</script>

<div id="container" style="height:400px"></div>