Chart.js 시작하기

리액트 프로젝트에서 Chart.js로 차트를 그리는 과정을 설치부터 옵션 커스텀까지 따라가는 글이다. 기능이 많아 시작하기 어려웠다는 경험에서 출발해, 라이브러리를 데이터셋과 옵션 두 부분으로 나눠 보면 덜 복잡해진다는 관점을 제시한다. 막대와 꺾은선을 함께 쓰는 혼합 차트가 예제다.

핵심 포인트

리액트에서 쓰려면 chart.js와 함께 렌더링을 담당하는 react-chartjs-2도 설치해야 한다.
컴포넌트에 데이터와 옵션 두 가지만 넘기면 기본 차트가 그려진다.
여러 타입을 섞는 혼합 차트는 하나의 차트 컴포넌트만 불러와도 구현된다.
각 데이터셋에 개별 타입을 지정하는 것이 혼합 차트의 핵심이다.
축이 여러 개 필요하면 데이터셋에 축 식별자를 지정해 연결한다.
기본 제공되지 않는 표현은 옵션의 콜백으로 처리할 수 있다.

상세 정리

출발점: 기능이 많고 복잡해 보여 선뜻 시작하기 어려웠다는 경험에서, 차트를 만들어야만 하는 상황에서 덜 어렵게 시작하는 법을 정리한다.
설치: 패키지 매니저에 따라 차트 본체와 리액트 래퍼를 함께 설치한다.
최소 사용법: 사용할 컴포넌트에서 차트 컴포넌트를 불러와 데이터와 옵션을 넘기면 된다.
감싸는 요소: 별도 컨테이너 없이도 동작하지만, 뷰포트 너비에 따라 차트가 같은 비율로 늘고 줄게 하려면 너비와 최대 너비를 지정한 요소로 감싼다.
혼합 차트의 정의: 막대형과 꺾은선처럼 서로 다른 타입을 함께 쓰는 것을 혼합 차트라 부른다.
혼합 차트 구현: 공식 데모의 소스처럼 꺾은선 컴포넌트 하나만 불러와도 되며, 데이터셋을 넘길 때 각 데이터에 타입을 지정하면 된다.
데이터셋 속성: 타입 외에 라벨, 선 색과 두께, 채움 여부, 배경색 같은 표현 속성을 각 데이터셋이 개별로 갖는다.
데이터 형식: 값 배열로 주는 방식 외에 x와 y를 가진 객체 배열로 줄 수도 있어 축 라벨과 값을 함께 지정할 수 있다.
보조 축: 데이터셋에 별도의 축 식별자를 지정하면 그 데이터만 다른 축에 붙는다.
옵션의 범위: 결측 구간 연결 여부, 막대 최대 두께, 그룹화 여부, 상호작용 방식 같은 전역 동작을 옵션에서 정한다.
플러그인 영역: 범례를 비롯한 부가 요소의 표시 방식도 옵션 안의 플러그인 항목에서 다룬다.
텍스트 표현: 단위 표기 같은 문구는 색과 폰트 계열, 크기, 굵기를 함께 지정해 붙인다.
콜백 활용: 축의 데이터 한계가 정해진 뒤 호출되는 콜백에서 최댓값에 배수를 곱하는 식으로 여유 공간을 만들 수 있다.
학습 경로: 공식 문서를 주로 참고하고 기본 지원되지 않는 부분은 검색으로 구현 방법을 찾았다고 밝힌다.
정리의 관점: 차트 라이브러리는 데이터셋과 그래프 설정 두 부분으로 나누어 접근하면 덜 복잡해진다고 맺는다.
반응형 처리: 컨테이너에 상대 단위 너비와 최대 너비를 함께 주면 좁은 화면에서도 잘리지 않고 비율이 유지된다.
시작 부담을 줄이는 순서: 먼저 데이터셋만 넣어 기본 형태를 띄우고, 그다음 옵션으로 축과 범례와 여백을 조정하는 순으로 접근하면 문서 전체를 훑지 않아도 된다.