진행 중인 팀 프로젝트에서 데이터를 그래프 형식으로 나타내야할 일이 생겼다. 여러가지 그래프 라이브러리 중에서 최종적으로는 recharts를 사용하게 되었다.
📊 다양한 그래프 라이브러리의 존재
정말 다양한 그래프 라이브러리가 있었다.
그 중 후보군은 두개로 좁혀졌다.
1. ApexCharts
2. Recharts
기본적인 선정 기준은 다음과 같았다.
1. 러닝커브(학습 소요시간)이 낮고
2. 깔끔한 UI를 갖고 있고
3. 적당한 커스텀이 가능하며
4. 관련 레퍼런스가 많을 것
다음 선정 기준을 잡기 위해 내가 구현해야 할 기능에 대해 알아보고 라이브러리의 기술로 구현이 가능할 지에 대해 찾아보았다.
📍 구현 기능1. x값 기준 그래프 부분 색상 변경 : 이게 안된다..?!?!?!
내가 구현할 그래프는 지난 거래의 거래가와 3개월간의 거래 예측가를 합한 데이터로 구성되어있다.
그 중 예측가에 해당하는 부분의 그래프 색상은 빨간색으로 다르게 그려져야한다.
그래서 날짜인 x값 기준으로 그래프를 부분적으로 색상 변경이 가능한 지 찾아보았는데....
없다..?
🙀..
라이브러리 자체의 커스텀으로는 불가능한 일이었다. ( 분명 많이 쓸 것 같은데 왜 안되는 거지 )
어떻게 해야 하나 생각을 하다가 한줄기의 희망같은 깃허브 이슈를 발견했다.
나와 같은 사람 발견!
친절하게 해결 방법을 알려준 사람이 있었다.
라이브러리의 속성을 변경해서 구현하는 것은 불가능 하니 그래프가 SVG 요소인 점을 이용하여 <linearGradient>로 선형 그라디언트 요소를 정의하는 것이었다.
recharts 관련 이슈에 남겨져 있었지만 svg 그래프라면 다 적용이 가능하다고 한다.
( 혹시 관련 자료가 궁금하다면 여기에 )
📍 구현 기능2. 그래프의 크기를 조절하는 브러시
그리고 스크롤러로 그래프의 크기를 조절할 수 있어야 했다.
원하는 스크롤러의 형태가 apexcharts에서 지원을 했었지만 버그와 메모리 누수문제로 더 이상 지원하지 않는다고 한다.
대체로 사용할만한 brush 기능이 apexcharts와 recharts에 있었다.
차이가 있다면 apexcharts는 그래프와 연동하여 그래프 차트 위에서 brush 기능을 수행할 수 있었고
반면 recharts는 그래프 연동 필요없이 하나의 빈 바에서 스크롤러 처럼 brush 기능 수행이 가능했다.
나는 아래 스크롤러의 대체제로 사용될만한 brush를 찾고 있었기 때문에 다른 그래프와 연동된 apexcharts는 사용목적과 맞지 않는다고 판단했다. recharts의 brush가 크기 같은 스타일 커스텀이 가능하다는 부분도 좀 더 적합하다고 생각했다.
📈 최종선택 : Recharts
그래서 최종적으로 x값 기준으로 색상 변경이 가능하고 그래프의 크기를 조절하는 brush 기능도 스크롤러 형태처럼 사용할 수 있는 Recharts를 선택하게 되었다.!
미리 알아본 덕에 생각보다 구현을 수월하게 할 수 있었고 짧은 시간 내에 만족할만한 결과물이 만들어졌다.
✨ 깨달은 점
라이브러리를 선택하는 과정만으로도 시간이 꽤 소요되었다. 그래도 정확하게 알고 들어가니 막상 구현을 시작했을 때 시간을 허비하는 일이 없어 오히려 효율적이었던 것 같다ㅎㅎㅎ
꼼꼼하게 알아보고 결정을 했다는 것, 그래서 구현에 많은 도움이 되었다는 것에 뿌듯했다--!
