<![CDATA[
<!-- 차트 기본 옵션 -->
const labels = ["Jan","Feb","Mar","Apr","Mai","Jun"];
const dataList = [80,45,23,48,17,100];
const chart01 = document.querySelector('.chart-01');
window.myChart = new Chart(chart01, {
type: 'bar',
data: {
labels: labels,
datasets: [
{
label: 'Product 1',
data: dataList,
backgroundColor: '#165BAA',
},
],
},
options: {
layout: {
padding:{
left:-12,
},
},
scales:{
x:{
grid:{
drawTicks:false, //영역 밖으로 넘어간 그리드 선 삭제
color:"#ECECEC"
},
ticks:{
font:{
size: 12,
},
color:'#4F4F4F',
}
},
y:{
grid:{
drawTicks:false,
color:"#ECECEC"
},
beginAtZero: true, // 0부터 시작
suggestedMax: 120, // 권장 최댓값
ticks:{
font:{
size: 12,
},
color:'#4F4F4F',
stepSize: 20, //고정 단계
padding: 12,
},
},
},
plugins: {
// 일반 범례
legend: {
display: true,
position:'bottom',
align:'start',
labels: {
padding: 40,
}
},
tooltip: {
enabled: true,
},
},
animation: true,
maintainAspectRatio: true, //크기 조정 시차트의 비율 유지
devicePixelRatio: 1.5, //해상도 증가
aspectRatio: 1.2, //차트의 비율 (가로/세로)
},
});
]]>
