Chart.js 시작하기

구조와 흐름

• chart.js와 react-chartjs-2 설치 후 Line 컴포넌트에 data, options 전달
• 컨테이너 너비 설정을 통한 반응형 차트 구성
• datasets별 type 지정으로 선·막대 혼합 차트 구현

적용해볼 점

• 공통 labels와 배열 인덱스 기반 데이터 매핑
• 시간·날짜 축 또는 불규칙한 x값에 적합한 { x, y } 데이터 전달
• type, 색상, 축 ID 등 데이터셋별 표현 속성 지정

주의할 점

• 옵션 네임스페이스에 따른 적용 범위와 동작 차이
• 시간 축 구현에 필요한 추가 설정 확인
• 축·툴팁·범례 콜백에서 수정한 값의 재할당 및 반환

성능/운영 포인트

• 누락 데이터 연결, 막대 최대 굵기, 동일 x값 그룹화 설정
• 범례·툴팁 스타일 및 null 값 툴팁 필터링
• 축 범위·눈금·그리드·선형/로그 스케일과 다중 y축 조정