리액트 Chart 라이브러리

자바스크립트 기반 차트 라이브러리

1. Chartjs

Chart.js

Chart.js

 

 

2. C3.js

C3.js | D3-based reusable chart library

C3.js | D3-based reusable chart library

3. D3.js

D3

D3 by Observable | The JavaScript library for bespoke data visualization

장점

1. 라이브러리 패키지 크기가 작은 편에 속한다.
2. 예제가 많은 편이다.
3. 시각화에 SVG를 활용한다. → SVG가 가지는 장점을 지님
4. 웹 표준에 가깝다.
5. DOM 기반으로 활용도가 높다.

단점

1. 러닝커브가 높은 편이다.
2. 외부 이미지로 저장이 불가능하다.
3. 이미지 요소가 많아질 경우 CANVAS에 비해 성능이 좋지 못할 가능성이 있다.
4. pre-build 차트가 아니기 때문에 브라우저에서 호출하여 그린다.
5. IE9+ 이상에서만 지원한다.

 

fully customize한 부분에서 d3.js, 빠른 chart 구성은 chart.js

 

리액트 차트 라이브러리

1. react-chartjs-2

Chartjs 를 기반으로 만들어진 리액트 래퍼버전 차트 라이브러리

• 일반적인 차트 그릴때 유용.
• 단순하고 유연하다고함.
• 깔끔한 디자인.
• 간단한 데이터 표현에 최적.
• 확장성은 부족하다는 평.
• 오픈 소스 커뮤니티라서 제한 없이 사용이 가능
• 동적 사용으로 nivo보다 좋은 편이라고 함

 

2. Recharts

https://github.com/recharts/recharts

GitHub - recharts/recharts: Redefined chart library built with React and D3

• 사용성 이슈
• 용량이 매우 큼
• 오픈 소스 커뮤니티라서 제한 없이 사용이 가능

채택!

 

3. nivo

https://github.com/plouc/nivo

GitHub - plouc/nivo: nivo provides a rich set of dataviz components, built on top of the awesome d3 and React libraries

• 오픈 소스 커뮤니티라서 제한 없이 사용이 가능
• 다양한 커스텀이 가능하고 쉬움

 

4. apexchart.js

• nivo 보다 커스텀이 다양

 

사실 무슨 차트를 쓰더라도 간단한 기능만 사용할 것이라 더 고민되었다.

react-chartjs-2 는 사용법이 쉽지만 커스텀하기엔 좋지 않아보이고 무거운 것 같아서 일단 recharts 를 쓰기로 하였다.

다만 recharts 는 차트 위에 마우스를 움직일 때마다 리렌더링이 일어나는거 같던데(리액트 개발자 툴로 보았을 때)

왜 그러는지 잘 모르겠다...