React에서 Chart.js를 사용해 작업하던 중, options이 적용되지 않는 문제점 발견
버전은 아래와 같이 사용중이었음
"chart.js": "^3.5.1",
"react-chartjs-2": "^3.0.5",
TypeScript
복사
찾아본 결과 chart.js 3.0으로 업데이트 되면서 옵션 설정 방법이 많이 변경되었음
내가 사용하려던 옵션이 아래와 같이 변경되었음을 확인할 수 있었음
•
scales.[x/y]Axes.ticks.beginAtZero was renamed to scales[id].beginAtZero
•
scales.[x/y]Axes.ticks.unitStepSize was removed. Use scales[id].ticks.stepSize
해당 문서를 참고 후 옵션 설정을 변경해주니 제대로 동작
import { Line } from 'react-chartjs-2'
function LineGraph() {
const chartData = {
labels: userPostActive ? userPostActive.dateList : [],
datasets: [{
label: '작성 코드',
backgroundColor: 'RGB(47, 140, 76, 0.5)',
borderColor: 'RGB(47, 140, 76, 0.5)',
data: userPostActive ? userPostActive.postList : [],
fill: false,
tension: 0.1
},{
label: '작성 댓글',
backgroundColor: 'RGB(189, 188, 188, 0.5)',
borderColor: 'RGB(189, 188, 188)',
data: userPostActive ?userPostActive.commentList : [],
fill: false,
tension: 0.1
}]
}
const options = {
responsive: false,
maintainAspectRatio: false,
scales: {
y: {
ticks: {
stepSize: 1, // y축 데이터 폭
},
beginAtZero: true, // 0부터 시작할지
}
},
}
return (
<div className='line-graph-container'>
<Line className='line-graph' width='910px' height='310px' data={chartData} options={options} />
</div>
)
}
export default LineGraph;
JavaScript
복사