chart.js 라벨 숨기기 (최신버전)

 

지난번 포스팅에서 막대그래프를 만들었는데요

위에 라벨 부분이 거슬려서 숨기려고 합니다.

 

options:{
            legend: {
                display: false
            },
        }

options에서 legend의 display를 false로 변경해주기만 하면 된다는데요

아무리 해도 숨기기가 안됩니다.

최신 버전에서는 위에처럼만 하는 걸로는 먹히지 않는데요

그래서 plugins로 한번더 감싸 줘야 합니다.

 

options:{ 
            plugins:{
                legend: {
                    display: false
                },
            }
        }

그러면 이렇게 라벨 부분이 안보이게 표시된 걸 확인할 수 있습니다.

 

const ctx2 = $('#test-chart2');
        const myChart2 = new Chart(ctx2, {
        type:'bar',
        data:{
            labels:['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
            datasets:[
                {
                    label:'2021',
                    data:[10,8,6,5,12,7],
                    backgroundColor:["#ff0000","#0000ff","yellow","green","rgba(180,85,162,1)", "rgba(255,127,0,0.5)"], //배경색상
                    hoverBackgroundColor:["#CBCE91"] //hover할때 색상변경
                }
                
            ]
        },
        options:{
                    maintainAspectRatio :false,//그래프의 비율 유지 
                    plugins:{
                        legend: {
                            display: false
                        },
                    }
                }
        });