nivo는 React와 D3.js를 기반으로 한 선언적 데이터 시각화 라이브러리로, 서버 사이드 렌더링(SSR) 지원과 풍부한 커스터마이징 기능을 갖춘 “슈퍼차지드” 컴포넌트를 제공합니다. (GitHub, GitHub)

핵심 특징

• 고도로 커스터마이징 가능: 색상·테마·그라디언트·패턴 등 거의 모든 속성을 조정할 수 있습니다. (GitHub)
• 모션/트랜지션: react-spring 기반 애니메이션을 기본 제공하여 부드러운 인터랙티브 효과 구현이 가능합니다. (GitHub)
• 인터랙티브 컴포넌트 플레이그라운드 & 방대한 문서: 직접 속성을 조작해 보며 학습할 수 있는 플레이그라운드와 예제 문서를 제공합니다. (GitHub)
• SVG·HTML·Canvas 렌더링: 데이터 양이 많을 땐 Canvas 버전을, 일반 차트는 SVG나 HTML 버전을 선택해 성능을 최적화할 수 있습니다. (nivo.rocks)
• 서버 사이드 렌더링 및 HTTP API: 차트 이미지나 HTML을 서버에서 렌더링해 반환하는 HTTP 엔드포인트를 지원합니다. (GitHub)

지원하는 차트 유형
Line, Bar, Pie, Scatterplot, Heatmap, Radar, TreeMap, Sunburst, Chord, Sankey, Stream, Calendar, Voronoi, Bump, Circle Packing, Choropleth, Swarmplot, Marimekko, Funnel, Radial Bar 등 20여 가지가 넘는 차트를 제공합니다. (nivo.rocks)

설치 방법

# core 패키지와 원하는 차트 패키지를 함께 설치
npm install @nivo/core @nivo/bar
# 또는
yarn add @nivo/core @nivo/bar

필요한 차트만 골라 설치해 번들 크기를 줄일 수 있습니다. (GitHub)

기본 사용 예시

import { ResponsiveBar } from '@nivo/bar';

const MyBarChart = ({ data }) => (
  <ResponsiveBar
    data={data}
    keys={['hot dog','burger','sandwich']}
    indexBy="country"
    margin={{ top: 50, right: 130, bottom: 50, left: 60 }}
    padding={0.3}
    colors={{ scheme: 'nivo' }}
    axisBottom={{ /* … */ }}
    axisLeft={{ /* … */ }}
  />
);

import { ResponsiveLine } from '@nivo/line';

const MyLineChart = ({ data }) => (
  <ResponsiveLine
    data={data}
    margin={{ top: 50, right: 110, bottom: 50, left: 60 }}
    xScale={{ type: 'point' }}
    yScale={{ type: 'linear', stacked: true }}
    useMesh={true}
  />
);

(nivo.rocks)

테마 및 커스터마이징

• theme 객체로 전역 스타일(글꼴, 축, 레이블, 툴팁 등)을 설정할 수 있습니다. (GitHub)
• 기본 테마는 defaultTheme.js에서 확인 가능합니다. (GitHub)
• 컴포넌트별로 colors, legends, grid, patterns, markers 등을 세밀하게 조정할 수 있습니다.

SSR & HTTP API

• 모든 차트가 SSR에 최적화되어 있고, HTTP API를 통해 서버에서 차트를 렌더링해 반환할 수 있습니다. (GitHub)

성능 고려 사항

• SVG/HTML 방식은 수백~수천 개의 노드까지 무리 없이 렌더링합니다. (nivo.rocks)
• Canvas 버전(*Canvas 컴포넌트)을 사용하면 수만 개 이상의 데이터도 빠르게 처리할 수 있습니다. (nivo.rocks)

라이선스 및 커뮤니티

• MIT 라이선스로 오픈소스 공개되어 있습니다. (GitHub)
• GitHub ⭐13.6k·🍴1.1k, 활발한 Discord & Discussions 커뮤니티가 운영됩니다. (GitHub)

추가 리소스

• 공식 사이트: nivo.rocks (GitHub)
• 깃허브 저장소: plouc/nivo (GitHub)
• 컴포넌트 탐색기: Components Explorer (GitHub)