[Chartjs] 범례와 차트 간격 조절하기

💬 개요

Chartjs를 이용한 Bar Chart에서 범례와 차트가 딱 붙어있는 현상 해결하기

 

 

0️⃣ 스크립트 작성 전

1️⃣ 차트 생성 후 플러그인 추가

:plugins="[legendMargin]"

<bar-chart style="height:100%" :chartData="chartDataArray" :options="options" :plugins="[legendMargin]"/>

 

2️⃣ 플러그인 객체 생성

legendMargin() {
    return {
        id: 'legendMargin',
        afterInit(chart,legend,options) {
            const fitValue = chart.legend.fit;

            chart.legend.fit = function fit() {
                fitValue.bind(chart.legend)();
                return this.height += 20;	// 원래 범례 높이에 20 더하기
            }
        }
    }
},

 

3️⃣ 결과

 

💬 참고

https://youtu.be/87rnMzENg3U