React Chart 라이브러리 소개

기본적으로 차트 라이브러리는 자바스크립트 기준으로 만들어져 있다.

Chartjs, C3js, D3js ... 이러한 라이브러리를 리액트에서 사용해주기 위해선 리액트 래퍼 형식으로 된 라이브러리를 사용해줘야 한다.

Chartjs : 일반적인 차트 그릴 때 사용, 단순하고 유연, 간단한 데이터 표현에 최적되어 있으나 확장성은 부족하다는 평이 있다.

D3js : 라이브러리 패키지의 크기가 작은 편이며 svg 를 활용한다. 웹 표준에 가깝고 활용가 높지만, 러닝커브가 높으며 이미지 요소가 많아질 경우 canvas에 비해 성능이 좋지 못할 가능성이 있다.

 

회사에서 쓸 라이브러리라 라이선스를 고려하여 오픈 소스라서 제한 없이 사용할 수 있는 리액트 전용 차트 라이브러리를 정리했다.

react-chartjs-2

https://github.com/reactchartjs/react-chartjs-2

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

사용하기 쉬우나 활용성이 적은 편

 

recharts

https://github.com/recharts/recharts

https://recharts.org/en-US/

사용하기 까다로운 편이지만 활용성이 크다고 한다.

 

nivo

https://github.com/plouc/nivo

https://nivo.rocks/

 

서칭에 의하면 react-chartjs-2 가 nivo 보다 동적으로 더 좋다고 한다.

다 써봤을 땐 react-chartjs-2 가 사용하기 쉬운 편이었다. 다만 활용성이 제한된 느낌이 컸다.

자사 프로젝트에선 1순위론 recharts, 2순위로 nivo 를 사용하기로 했다. 아무래도 사용성 및 활용성을 중점으로 두었기 때문이다.