[Vue.js] Chartjs의 legend 위치 및 모양 수정

[그림 1] legend의 position 및 point style 수정

 

legend의 position 및 point style 수정

legend의 기본 위치는 top이고 point style은 직사각형 모양이다. 그런데 [그림 1]과 같이 bottom에 위치시키고 정사각형 모양의 point로 표시하고 싶었다.

먼저 options에 아래의 코드를 추가한다.

plugins: {
  legend: {
    position: 'bottom',
    labels: {
      usePointStyle: true
    }
  }
}

 

그리고 datasets의 각 객체에 pointStyle: 'rect'를 추가한다. pointStyle 옵션에 대한 정보는 아래 링크에서 확인할 수 있다.

https://www.chartjs.org/docs/latest/configuration/elements.html#point-styles

Elements | Chart.js

 

해당 부분 전체 코드는 다음과 같다.

chartData: {
    labels: [
      '겉뚜껑',
      '속뚜껑',
      '일산화탄소',
      '이산화탄소',
      '메탄',
      '황화수소',
      '수위레벨',
      '배터리'
    ],
    datasets: [
        {
            label: '경계',
            backgroundColor: '#FF9900',
            pointStyle: 'rect',
            data: [40, 39, 10, 40, 39, 80, 40, 20]
        },
        {
            label: '심각',
            backgroundColor: '#FF6B00',
            pointStyle: 'rect',
            data: [40, 39, 10, 40, 39, 80, 40, 10]
        },
        {
            label: '위험',
            backgroundColor: '#B70000',
            pointStyle: 'rect',
            data: [20, 10, 12, 33, 22, 4, 0, 30]
        },
        {
            label: '통신장애',
            backgroundColor: '#777D81',
            pointStyle: 'rect',
            data: [0, 0, 0, 0, 2, 4, 0, 5]
        }
    ]
},
chartOptions: {
    responsive: true,
    maintainAspectRatio: false,
    scales: {
        x: {
            stacked: true
        },
        y: {
        	stacked: true
        }
    },
    plugins: {
        legend: {
        position: 'bottom',
        labels: {
              usePointStyle: true
            }
    	}
    }
}