Nivo — Rich Data Visualization Components for React

Introduction

Nivo provides a rich set of data visualization components for React, built on top of D3.js. Each chart type is a self-contained React component with built-in theming, motion, and responsive sizing, letting developers add polished charts to dashboards and reports with minimal configuration.

What Nivo Does

• Offers 20+ chart types including bar, line, pie, heatmap, treemap, choropleth, and waffle
• Provides both SVG and HTML/Canvas rendering for each chart type
• Supports server-side rendering for charts that need to appear in static pages or emails
• Includes built-in motion and transitions powered by React Spring
• Handles responsive resizing with wrapper components that adapt to container dimensions

Architecture Overview

Nivo is organized as a monorepo with one package per chart type under the @nivo/* scope. Each package exports a React component that takes data and configuration as props, computes layout using D3 utilities, and renders SVG or Canvas output. A shared theming system lets developers apply consistent colors, fonts, and spacing across all chart types. The @nivo/api package enables server-side chart rendering via an HTTP endpoint.

Self-Hosting & Configuration

• Install individual chart packages from the @nivo/* scope to keep bundles small
• Pass data arrays and axis configuration as props to chart components
• Apply a custom theme object to override colors, typography, and grid styles
• Use Responsive* variants for charts that adapt to parent container size
• Enable server-side rendering with the @nivo/api package for static image generation

Key Features

• Consistent theming system across all 20+ chart types
• SVG, Canvas, and server-side rendering options per chart
• Interactive tooltips, legends, and click handlers built in
• Motion and transitions enabled by default with React Spring
• Storybook-powered documentation with live examples for every chart

Comparison with Similar Tools

• Recharts — simpler declarative API for common charts; Nivo offers more chart types and richer theming
• Visx — low-level primitives requiring manual assembly; Nivo provides ready-to-use components
• Victory — similar component-based approach; Nivo has broader chart variety and built-in motion
• Chart.js — canvas-based and framework-agnostic; Nivo is React-native with SVG and Canvas options
• ApexCharts — framework-agnostic with interactive features; Nivo integrates more tightly with React patterns

FAQ

Q: Does Nivo support TypeScript? A: Yes. All packages include TypeScript type definitions.

Q: Can I render charts on the server? A: Yes. Nivo provides a server-side rendering API and static SVG output for use in Node.js environments.

Q: How do I customize chart colors? A: Pass a colors prop with a color scheme name or an array of custom colors, or define colors in the theme object.

Q: Is Nivo free? A: Yes. Nivo is MIT-licensed and free for commercial use.

Sources

• https://github.com/plouc/nivo
• https://nivo.rocks/