chart.js 크기 고정 방법

 

차트를 만들면 차트 크기는 창 크기에 따라 가변적입니다.

<canvas id=test-chart></canvas>

 

 

가변적인 chart 사이즈를 고정으로 만들기 위해서 test-chart 아이디 값에 css를 적용시켜 보겠습니다.

 

width값과 height값이 아얘 안 먹히는 걸 확인할 수 있습니다.

 

 

chart.js  크기 고정 방법

 

위와 canvas id에 직접 스타일을 넣어주면 적용되지 않는 걸 확인할 수 있는데요 이럴 때는

차트를 그리는 canvas를 감싸주는 엘리먼트를 넣어주고 거기에 스타일을 적용시키면 됩니다.

 

html

<div class="chart-wrap">
	<canvas id=test-chart></canvas>
</div>

 

css

.chart-wrap{
    width: 400px;
    height: 500px;
}

그러면 아래와 같이 chart.js로 만든 차트의 크기 고정이 가능합니다.

 

그런데 차트 비율에 맞춰져 있기 때문에 width값에 맞춰서 height값이 적용 됩니다.

옵션에서 비율에 맞춰진 설정을 해제해 줘야 합니다.

options:{
	maintainAspectRatio :false
}

위에 maintainAspectRatio속성을 false해주면 되는데요

 

그러면 아래와 같이 원하는 사이즈의 차트를 만들 수 있습니다.

아래는 전체 html 코딩영역입니다.

    <div class="chart-wrap">
        <canvas id=test-chart></canvas>
    </div>


    <script>
        const ctx = $('#test-chart');
        const myChart = new Chart(ctx, {
        type:'line',
        data:{
            labels:['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
            datasets:[
                {
                label:'2021',
                data:[10,8,6,5,12,7]
                },
                {
                label:'2020',
                data:[10,5,7,6,11,9]
                },
                
            ]
        },
        options:{
                    maintainAspectRatio :false
                }
        });
    </script>