토이 프로젝트를 진행하는 중에 입력한 데이터를 바탕으로 chart.js를 활용해보고 정리를 해보는 글입니다.
차트 라이브러리가 많은 가운데 차트 라이브러리 모음 글을 참고하여 개인적으로 chart.js의 차트가 깔끔했고 공식문서의 설명이 친절한 chart.js를 선택했습니다.
설치
npm i chart.js react-chartjs-2react에서 chart.js를 쉽고 편리하게 사용하려면 react-chartjs-2 라이브러리도 설치해줘야 한다.
차트 그리기
먼저 차트에 필요한 요소를 알아보자면 register와, option이다.
-
register는 차트를 그리는 데에 필요한 기능들을 추가하거나 변경할 것들을 import하고 register에 등록하면 된다.
-
option은 다양한 option과 plugin을 통해 차트를 자유롭게 커스텀 할 수 있다.
import { Chart as ChartJS, CategoryScale, LinearScale, BarElement, Title, ArcElement, Tooltip, Legend } from 'chart.js';
import { Bar, Pie } from 'react-chartjs-2';
ChartJS.register(CategoryScale, LinearScale, BarElement, Title, ArcElement, Tooltip, Legend);
사이드 프로젝트가 수입 및 지출 내역을 입력한 바탕으로 차트를 보여주는 웹 앱 으로 활용했던 차트 유형이 Bar형 차트와 Pie형 차트를 위와 같이 활용했다.
1) register
만약 차트 유형별로 register에 등록하는 필요한 기능에 대해 알아보자면 예를 들어 Bar차트에 필요한 BarElement가 register에 등록되지 않았다면 아래와 같은 에러가 나오게 된다.
bar차트를 그리기 위해 필요한 bar요소가 등록되지 않았다는 에러로 register에 등록에 대한 유추를 할 수 있으며 필요한 요소를 등록하지 않는 이상 bar차트는 화면에 그려지지 않는다.
또한 react-chartjs-2 공식문서를 보면 차트 유형별로 필요한 기능 요소들을 참고하여 register 등록을 할 수 있다. (open editor로 차트 유형 전체 코드를 참고)
2) option
// bar 차트 옵션
const totalOptions = {
responsive: true,
aspectRatio: 1,
plugins: {
legend: {
position: 'top' as const,
display: false,
},
title: {
display: true,
text: `< ${userData?.name}님 수입 및 지출 내역 >`,
font: { size: 16 },
padding: { bottom: 20 },
},
},
};bar의 사용된 option을 보면 responsive와 aspectRatio, plugins가 입력된것을 볼 수 있다.
responsive는 화면의 크기 변화에 따른 속성으로 true이면 자동으로 크기를 조절한다.
aspectRatio는 차트의 비율을 나타내는 속성이고 1로 설정하게되면 너비와 높이가 동일 비율로 유지된다.
plugins의 안에 옵션을 보면 register에 등록된 부분을 알 수 있다.
legend는 차트의 범례를 뜻하는데 데이터의 항목이라고 생각하면된다. 현재 bar 차트 옵션에서는 범례 위치를 top으로 위로 설정해두었지만 사용한 프로젝트에는 범례를 사용하지 않아서 false로 설정했다.
또한 title은 이 bar 차트가 어떤차트인지 알 수 있는 차트의 제목이다. text를 보면 로그인한 사용자의 닉네임으로 수입 및 지출 내역의 차트 제목인 부분을 알 수 있고 글자 사이즈와 title과 차트의 간격의 옵션을 설정했다.
3) data
위에서 차트의 필요한 기능과 옵션을 입력했으니 입력된 각각의 수입 및 지출 합산 내역의 데이터를 넣으면 차트가 완성이다.
// 수입 및 지출 내역 데이터
const totalData = {
labels: ['수입', '지출'],
datasets: [
{
data: [plusTotal, minusTotal],
backgroundColor: ['rgba(53, 162, 235, 0.5)', 'rgba(255, 99, 132, 0.5)'],
},
],
};data에 해당하는 총 수입 및 지출 합산 내역을 순서대로 배열에 적고 막대 그래프의 색상을 지정하면 차트가 그려지게 된다.
< 위 option에서 legend를 사용하지 않았던 이유 >
- legend 범례 true, labels 미입력
- legend 범례 false, labels 입력
위의 두개의 옵션을 비교해보면 데이터 항목도 수입과 지출 2가지로 딱 맞았고 legend로 차트 데이터의 항목의 범례를 보여주지 않고도 labels 입력해서 어떤 데이터 항목인지 알 수 있을 뿐더러 개인적으로 labels이 깔끔해보여서 이 프로젝트에서는 범례를 사용하지 않았던 이유이다.
만약 수입과 지출 2가지 데이터로 월별 및 요일별로 그래프를 그리고 싶었다면 legend를 사용하고 labels에 해당 월 및 요일을 입력했을것이다.
4) 마무리
<Bar options={totalOptions} data={totalData} />
bar 차트 유형 컴포넌트에 입력한 option과 data를 넣어주면 위 처럼 차트가 그려지고 추가하거나 변경하면 금액 데이터에 따라 차트가 업데이트 된다.
🖇️ Reference
