• 막대 그래프 - 공식 홈페이지
• 막대 그래프(한글)

  var config = {
	type: 'horizontalBar'               // 그래프 type
	, data: {
		labels: labels
		, datasets: [{
			data: data 
			, backgroundColor: [ 
                               '#4dc9f6',
		               '#f67019',
				'#f53794',
				'#537bc4',  // 색상
				'#acc236',
				'#166a8f',
				'#00a950',
				]
			, fill: false
		}]
	}
	, options: {
		maintainAspectRatio: false   // true로 하면 width와 height 크기 변화됨.
		, responsive: true           // 반응형 설정
		, scales: {
			xAxes: [{            // X 축 관련
				barThickness: 40
				, gridLines: { 
					display: false
				}
				, ticks: {   // X 축 0부터 시작해서 0.5만큼 커지면서 최대 5.0까지 표현
					beginAtZero: true, 
					max:5.0,         
					stepSize:0.5
				}
				, display: true
			}]
			, yAxes: [{          // Y 축 관련
				gridLines: {
					display: false
				}
				, ticks: {
					beginAtZero: true
				}
			}]
		}
		,tooltips: {                 // data 배열을 숫자로 변경 후 소수 2번째 자리까지 표현
			callbacks: {
				label: function (tooltipItem, data) {
					return Number(tooltipItem.xLabel).toFixed(2);
				}
			}
		}
		, legend: {
			display: false
		}
	}
};
  

• horizontalBar 적용 방법
• chart js 예시

• [chart.js] canvas에 chart 덧씌울 시 이전 chart가 그대로 있는 문제

• How to Reset the Filter on a Chart in Chart.js
• [Chart.js] options 설정 - bar 두께 조절 및 다양한 옵션