React Chart Library 리서치

변경 이유

기존에 사용하던 HighChart의 라이선스가 상업적 이용 시 요금이 부과되며, 사내에서 사용 중인 HighChart 라이선스의 버전이 v6.X여서 라이선스 문제 및 버전 노후화로 인해 차트 라이브러리를 변경하기로 함

 

주요 라이브러리 분석

1. Recharts

• 특징: 웹 개발자가 가장 많이 사용하는 차트 라이브러리, 적당한 커스텀 가능
• 제공 차트: 모든 유형을 제공하지는 않음
• 사용 용이성: 비교적 쉽고 간단함 (가벼운 편)
• 라이선스: MIT License

2. React-chartjs-2

• 특징: JS 기반인 Chart.js를 React 애플리케이션에서 쉽게 사용할 수 있도록 해주는 라이브러리
• 제공 차트: 혼합 차트 제공
• 디자인: 기본 디자인이 가장 단순하고 대중적, 고급 기능 제한
• 사용 용이성: 간단한 차트 구현에 적합
• 기타: 샘플 코드가 TSX로 제공됨
• 라이선스: MIT License

3. Victory

• 특징: 모든 요소가 컴포넌트 형태로 제공되어 자유롭게 조합 가능
• 제공 차트: 기본 차트만 제공
• 사용 용이성: 완벽한 커스텀의 한계, 디자인 단순함
• 라이선스: MIT License

4. Visx

• 특징: Airbnb에서 만든 라이브러리, D3.js를 React 기반으로 Wrapping
• 사용 용이성: 난이도 높음, 특이한 차트 구현에 적합
• 커스텀: 그림판 수준의 커스텀 가능
• 기타: TypeScript 기반
• 라이선스: MIT License

5. Nivo

• 특징: D3 및 React 기반, 디자인 깔끔
• 사용 용이성: 비교적 쉽고 간단함, 속성 값을 직접 변경하여 테스트 가능
• 제공 차트: 혼합 차트 제공하지 않음
• 라이선스: MIT License

6. React-vis

• 특징: 차트 유형이 많음, 적당한 커스텀 가능
• 사용 용이성: 미니멀, 자료 적음
• 라이선스: MIT License

7. BizCharts

• 특징: Alibaba에서 만든 라이브러리, 문서가 중국어로 제공
• 사용 용이성: 비교적 쉽고 간단함
• 제공 차트: 차트 유형 많음
• 라이선스: MIT License

8. Ant Design Charts

• 특징: 차트 종류 다양, 공식 문서 잘 정리
• 사용 용이성: 적당한 커스텀 가능
• 라이선스: MIT License

9. Apexcharts

• 특징: 차트 종류 다양, 공식 문서 잘 정리
• 사용 용이성: 적당한 커스텀 가능, 숙련도 높으면 역동적 차트 구현 가능
• 라이선스: MIT License

참고 자료 및 비교

• npm download

 

라이브러리	GitHub 스타	NPM 주간 다운로드 수	문서 평가	차트 다양성	요약
Recharts	23k	1.2M	좋음	11+	사용이 쉽고, 컴포넌트 기반으로 많은 개발자들이 사용. 다양한 SVG 차트 제공.
React-chartjs-2	6.2k	1.1M	좋음 (Chart.js 문서)	8+	Chart.js의 React 래퍼. 간단한 차트 구현에 적합.
Victory	10.6k	237k	좋음	기본형만 제공	컴포넌트 형태로 제공되어 자유로운 조합 가능. 기본 차트만 지원.
Visx	18.2k	24k	보통	다양한 차트	D3.js를 기반으로 한 고도의 커스텀 차트 구현 가능.
Nivo	12.3k	6k	좋음	다양한 차트	디자인이 깔끔하고 사용법이 비교적 쉬움. 혼합 차트는 지원하지 않음.
React vis	6.8k	157k	미니멀	다양한 차트	간단한 시각화에 적합. 자원이 적음.
BizCharts	5.8k	30k	중국어 (일부 영어 지원)	다양한 차트	사용이 쉽고 다양한 차트 유형 지원. 중국어 문서로 인해 접근성 문제 있을 수 있음.
Ant Design Charts	3.8k	50k	좋음	다양한 차트	Ant Design 생태계의 일부로, 다양한 차트 유형과 잘 정리된 문서 제공.
Apexcharts	6.3k	18k	좋음	12+	다양한 차트 유형을 지원하며 동적 차트 구현에 적합.

 

 

결론

라이브러리 선택 순위

1. Recharts
2. Apexcharts
3. React-chartjs-2

라이브러리 판단 근거

• 공식 문서의 이해 용이성: 공식 문서가 이해하기 쉽고 잘 작성되어 있는지 여부
• 참고 자료의 수: 온라인에서 라이브러리에 대한 튜토리얼, 블로그 포스트, 비디오 등의 참고 자료가 충분히 있는지 여부
• 인기 지표: GitHub 스타 수와 NPM 주간 다운로드 수
• 차트 타입 다양성: 다양한 유형의 차트를 제공하는지 여부
• 차트 제작 용이성: 차트를 쉽게 만들 수 있는지 여부, 사용자의 편의성을 고려한 API 제공 여부