몽땅뚝딱 개발자

Chart.js에서 기본적으로 제공하는 데이터 레이블이 구현하는데 한계가 있어 이 플러그인을 사용했다. chartjs-plugin-datalabels chartjs-plugin-datalabels.netlify.app ◽ Scriptable 옵션은 스크립팅이 가능한 경우도 있고 아닌 경우도 있어서 문서를 확인해보면 된다. Scriptable 항목이 'Yes'이면 동적으로 옵션을 줄 수도 있다. (하지만.. 문서에 스크립트를 사용할 수 없다고 작성되어 있었음에도 동작하는 것들이 있었다.) ◽ Option const dataLabelOption = { offset: 0, // 레이블의 패딩 적용 (기본값이 4이기 때문에 0으로 조정) borderRadius: '5', // 레이블을 감싸는 영역에 border..

plugins: [legendMargin], // 범례와 그래프 간 간격조정 const legendMargin = { id: 'legendMargin', beforeInit(chart, legend, options) { const fitValue = chart.legend.fit const spacing = 20 // 추가할 간격 chart.legend.fit = function fit() { fitValue.bind(chart.legend)() return (this.height += spacing) } }, } 출처 개인적으로 공부한 내용을 정리하는 블로그로 잘못된 개념을 게시하지않도록 주의하고 있으나 오류가 있을 수 있습니다.