Typescript 무료 차트 정리
토이프로젝트에 사용할 Typescript를 지원하는 차트를 찾아보다가
일단은 내가 볼 목적으로.. 정리하였다.
github star 높은 항목 위주로 찾아보았고, 무료여야 하기 때문에 MIT Lisence 항목만 추려 보았다.
1. recharts/recharts
- Example
- 22.8k stars
- 특징
- React 와 D3로 재정의된 차트 라이브러리
- React 구성 요소를 사용한 간단 배포
- SVG, D3 하위모듈에만 의존하는 경량, React, React-components
- 심플한 디자인 & 애니메이션
2. airbnb/visx
- Example
- 18.8k stars
- 특징
- D3의 강력한 기능을 결합하여 시각화를 생성하고 DOM 업데이트에 대한 반응의 이점을 결합.
- SVG, D3, React
- 좀 더 다양하고 시각화된 차트
3. chartist-js/chartist
- Example
- 13.3k stars
- 특징
- 간단한 반응형 차트 라이브러리
- SVG 지원, 경량
- Bar / Line / Pie 3종류만 지원
- Readme 나 License 관련 내용을 보면 개발자가 유쾌한 것 같다.
- 디자인 친화적이지 않음 (실제 개발자가 써놓은 멘트)
- WTF License 니 맘대로 수정하고 배포해라 등
4. antvis/G2
- Example
- 12k stars
- 특징
- 다양한 시각화 차트를 제공하는 라이브러리
- SVG, WEBGL, Canvas
- 각종 테마나 애니메이션등을 지원하나, 데모페이지 언어를 영어로 바꿔도 중문으로 표시됨
- AntD UI 라이브러리 만든데서 만들어서 깔끔한 분위기
5. plouc/nivo
- Example
- 12.7k stars
- 특징
- 다양한 시각화 차트를 제공하는 라이브러리
- SVG, D3, Canvas, React
- 테마 지원, 높은 커스터 마이징
그래서 결정은?
초기에 고민한대로 visx 나 nivo 로 갈 것 같은데 점점 nivo로 기울고 있다. 원하는 차트 기능도 있고 디자인도 준수하고 등등 무난할 것 같다는 생각이다.
그 외 차트 추천 사이트
- https://www.monterail.com/blog/javascript-libraries-data-visualization
- https://www.reactlibraries.com/blog/the-best-react-charting-libraries-in-2023