Highchart 크기 조정

Highchart 작업을 할 때 차트 바깥의 div크기가 변경될 경우가 있다. 바깥의 크기는 변경되었는데 차트는 그에 맞게 변경이 되지 않아 차트 모양이 이상하게 보인다.

외부 div가 커진 경우
외부 div가 작아진 경우
차트가 reflow된 모습

이와 같이 외부 div와 hichart의 크기가 달라진 경우에는 reflow함수를 사용한다.

<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() {
  var chart = Highcharts.chart('container', {
    xAxis: {
        categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
        showEmpty: false
    },

    yAxis: {
        showEmpty: false
    },

    series: [{
        allowPointSelect: true,
        data: [ // use names for display in pie data labels
            ['January',    29.9],
            ['February',   71.5],
            ['March',     106.4],
            ['April',     129.2],
            ['May',       144.0],
            ['June',      176.0],
            ['July',      135.6],
            ['August',    148.5],
            {
                name: 'September',
                y: 216.4,
                selected: true,
                sliced: true
            },
            ['October',   194.1],
            ['November',   95.6],
            ['December',   54.4]
        ],
        marker: {
            enabled: false
        },
        showInLegend: true
    }]
});

// width 변경
$('#widthchange').click(function () {
    var width = $("#container").css("width");
    console.log(width);
    if( width=="600px" ) 
    	$("#container").css("width","800px");
    else 
    	$("#container").css("width","600px");
});

// chart 다시 그리기
$('#redraw').click(function () {
	chart.reflow();
});

});
</script>

<div id="container" style="width:600px;height:400px;border:1px solid #000000;margin:20px;"></div>

<button id="widthchange">width change</button>
<button id="redraw">redraw</button>