Chart.js 라벨 짤릴 경우

Chart.js를 이용해서 그래프를 그릴 경우, <canvas>태그에다가 그려넣기 때문에 사이즈 조절을 하려면 canvas태그를 감싸고 있는 태그의 크기를 조정해줘야만 반영된다.

그러나 가끔 라벨의 길이가 길어지면 canvas 영역을 벗어나는 경우가 생기는데,
chart.js에서 라벨의 위치를 조정하는 옵션은 따로 제공하지 않는것 같다.
(당연히 있을줄 알고 문서를 뒤지느라 시간이 좀 걸렸다.)

아무튼 검색을 거듭한 끝에 스택오버플로우에서 발견한 방법으로 해결했는데,
좀 꼼수같긴 하지만 가장 확실한 방법이기도 하다.

labels: ['라벨1   ', '   라벨2'],

이렇게 라벨에 공백을 주어서 글자가 안잘려 보이도록 하는것!!

오른쪽이 잘린다면 뒤에 공백,
왼쪽이 잘린다면 앞에 공백.

완전히 꼼수이지만 똑똑한 발상이다....
역시 갓택오버플로우

나는 라벨과 데이터를 ajax로 받아온 값들로 동적으로 추가해야해서 아래와 같이 처리했다.

var config = {
    
    type: 'line',
    data: {
        labels: [''],
        datasets: [{
            backgroundColor: dashboardCtrl.chartColors.green,
            borderColor: dashboardCtrl.chartColors.yellow,
            pointBorderColor: dashboardCtrl.chartColors.orange,
            pointBackgroundColor: dashboardCtrl.chartColors.orange,
            label: "가맹점 수",
            data: [
                    0
                ],
        }]
    },
    options: {
        responsive: true,
        title: {
            display: true, //text:'Chart.js Line Chart'        
        },        
        tooltips: {
            mode: 'label',
            callbacks: {}
        },
        hover: {
            mode: 'dataset'
        },
        scales: {
            xAxes: [{
                display: true,
                scaleLabel: {
                    show: true,
                    labelString: 'Month'
                }
            }],
            yAxes: [{
                display: true,
                scaleLabel: {
                    show: true,
                    labelString: 'Value'
                },
                ticks: {
                    suggestedMin: 0, //suggestedMax: 250,                
                }
            }]
        }
    }
};
for (var i = 0; i < data.length; i++) {
    config.data.labels.push(data[i].month + '     ');
    config.data.datasets[0].data.push(data[i].cnt);
}

var ctx = document.getElementById("chart-area").getContext("2d");
dashboardCtrl.chart = new Chart(ctx, config);