2026-03-16

시각화 라이브러리 정리

1) Recharts

https://recharts.github.io/

대표적

장점

• React 컴포넌트 방식이라 Next.js와 잘 맞음
• TypeScript 적용이 비교적 편함
• 카드형 대시보드 UI 만들기 좋음
• 커스텀 Tooltip, Axis, Label 조정이 쉬움
• 작은 선그래프, 영역차트, 바차트 구현이 빠름
• 러닝커브가 낮음

단점

• 아주 화려하거나 고급 인터랙션은 한계가 있음
• 게이지 차트는 기본 제공이 애매해서 약간 커스텀해야 함
• 데이터가 엄청 많아지면 성능상 ECharts보다 덜 강력할 수 있음

추천도

• 전체적으로 1순위

2) Apache ECharts + echarts-for-react

기능적으로는 제일 강력

https://echarts.apache.org/en/index.html

장점

• 차트 종류가 매우 많음
• 게이지, 히트맵, 지도, 복합 차트, 마크라인 같은 기능이 강함
• 데이터가 많아도 성능이 좋음
• 디자인 완성도가 높게 나오기 쉬움

단점

• React스러운 개발 경험은 Recharts보다 덜 자연스러움
• 옵션 객체가 길고 복잡해짐
• 단순한 차트도 설정량이 많아질 수 있음
• “작고 예쁜 카드형 UI”는 오히려 과할 수 있음

추천도

• 차트 표현을 더 고급스럽게 할 생각이면 2순위
• 특히 나중에 지도 시각화, 게이지, 복합 분석 차트까지 확장할 거면 꽤 좋다

3) Nivo

디자인이 예쁘고 대시보드 느낌이 잘 난다.

https://nivo.rocks/parallel-coordinates/canvas/ 막힘

장점

• 기본 스타일이 세련됨
• 반응형 차트가 편함
• 대시보드용 선/바/파이 차트가 깔끔함
• SVG 기반이라 커스터마이징도 가능

단점

• Recharts보다 생태계 체감이 조금 좁음
• 미세한 커스텀에서 귀찮을 때가 있음
• 게이지나 특수 차트는 한계가 있음

추천도

• 디자인 우선이면 후보
• 다만 실무 구현 편의성은 Recharts 쪽이 더 낫다

4) Chart.js + react-chartjs-2

https://react-chartjs-2.js.org/

전통적이고 많이 쓰지만, 이 경우엔 1순위는 아니다.

장점

• 유명하고 자료가 많음
• 기본 차트 종류는 충분함
• 플러그인 생태계가 있음

단점

• React 컴포넌트 감성은 Recharts보다 떨어짐
• 캔버스 기반이라 Tailwind + 컴포넌트 단위 커스텀이 덜 직관적일 수 있음
• 작은 UI 카드 여러 개를 섬세하게 맞추는 작업은 조금 불편할 수 있음

추천도

• 기존에 써본 적 있으면 가능
• 새로 시작이면 굳이 이것부터 갈 필요는 없음

5) Visx

커스터마이징 자유도는 높지만 지금 단계엔 과하다.

장점

• 매우 유연함
• 디자인 시스템에 맞춘 완전 커스텀 시각화 가능
• 대형 프로덕트에서 정교하게 쓰기 좋음

단점

• 러닝커브 높음
• 구현 시간이 오래 걸림
• “빨리 예쁜 대시보드 만들기”에는 비효율적임

추천도

• 비추천
• 지금 페이지 목적에는 오버엔지니어링이다