티스토리 뷰

ChartJS를 처음 적용하면 크기가 자동으로 지정됩니다. 저 같은 경우는 가로로 긴 그래프가 필요했는데요,

구글링해본 결과 90프로가 canvas 태그에서 원하는 넓이와 높이를 지정해준 다음 option에서 responsive: false로 알려줍니다. 하지만 제 프로젝트에 적용한 결과 크기는 비슷하게 나오지만 안에 있는 글자들도 다 찌그러져서 나와서 다른 방법을 찾았는데요, option 부분에 responsive 대신 maintainAspectRatio: false를 넣으면 해결됩니다!!

<style>
	#chart{
    	position: relative;
    }
    
    #chart #day_chart{
    	positon: absolute;
        top: //absolute로 원하는 위치 잡아주세요!!
    }
</style>

<div id="chart">
	<canvas id="day_chart"></canvas>
</div>

<script>
	// ....
    
    var config = {
    	type: 'line',
        data: Chartdata,
        option: {
        	maintainAspectRatio: false,
            // ....
        }
    }
    
</script>

이렇게 해서 차트 사이즈 변경하고 글자 찌그러지는 에러 해결했습니다.