구현해야할 것

• 몸무게를 기준으로 꺽은석 그래프 구현
  • 포인트 디자인이 가능 해야함
• 도넛 모양 그래프 구현

선정 기준

1. 최근에도 많이 사용되고 있고, 꾸준한 업데이트가 진행되고 있는가?
2. 커스텀이 자유로운가?
3. 예제 코드가 많이 존재하는 가?
4. 구현하고자 하는 그래프 유형을 제공하는 가?

위의 4가지 선정 기준으로 많은 차트 라이브러리를 비교했습니다.

1. react-chartjs-2

   • 장점 :
     1. 혼합 차트 제공 ( 현재 내 프로젝트에서는 필요 없는 기능)
     2. 기본 디자인이 가장 단순하고 대중성있음
     3. 간단한 차트 구현 좋음
   • 단점 :
     • 복잡한 차트에 제한이 있음
     • JS 프로젝트인데 TS코드라서 수정이 필요
     • 최근 업데이트가 2년전
     • 공식문서가 존재하지 않음

   결론 : 치명적인 단점인 공식문서가 존재하지 않고 최근 업데이트가 2년전이라는 점에서 탈락

2. chart.js

   • 장점 :
     1. js 에서 가장 많이 사용되는 라이브러리
     2. 크기가 작다
     3. 귀여운 디자인이 많다
     4. 커스텀 가능하다
   • 단점 :
     1. Chart.js로 그려진 차트를 리액트 앱으로 랜더링할 수 있도록 하기 위해 새로운 라이브러리 추가 사용해야됨
     2. 보통 react-chartjs-2를 많이 추가로 사용하는데 위에 적은 단점으로 인해 react-chartjs-2는 사용안함

   결론 : react-chartjs-2를 사용해야 해서 탈락

3. Nivo

   • 장점 :

     1. 공식문서가 잘 되어있어서, 공식문서에서 코드를 수정하고 테스트할 수 있다.
     2. 사용법이 쉽다.
     3. 디자인이 깔끔하다.

     

   • 단점 :

     1. 커스텀에 대한 정보가 적고 커스텀 범위가 좁다.
     2. npm trend에서 다른 라이브러리 보다 낮은 사용률

   결론 : 처음에 nivo를 통해 구현을 해 보았지만 내가 원하는 그래프로 커스텀이 힘들어 해당 라이브러리도 탈락

4. recharts

   • 장점 :

     1. react chart라이브러리 중 가장 많이 사용됨
     2. 최근에도 계속해서 업데이트 진행됨
     3. 공식문서에서 바로바로 예제코드 수정하고 실행 가능
     4. 비교적 쉬운 커스텀 방식 → 리액트 컴포넌트로 커스텀 가능
     5. 사용법이 쉽고 간단하다.

     

   • 단점 :

     1. 모든 차트 유형을 제공하지 않음 → 내가 구현하고자 하는 그래프는 제공

   결론 : 단점이 별로 없고 가장 react chart 라이브러리 중 가장 많이 사용되고 커스텀도 비교적 쉬운 recharts로 선택!

   npm trends