chart.js 수평막대그래프 만들기

지난 포스팅에서 수직 막대그래프를 만들었는데 이번에는 수평 막대그래프를 만드는 방법이다.

 

엄청 간단하다.

수직 막대그래프와 동일한 방식으로 만든 후에 options값만 추가하면 된다.

options:{
            indexAxis: 'y' //수평차트 만들기
        }

 

 

전체 스크립트 코드

const ctx3 = $('#test-chart3');
        const myChart3 = new Chart(ctx3, {
        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
                        },
                    },
                    indexAxis: 'y' //수평차트 만들기
                }
        });