# Nivo — Rich Data Visualization Components for React

> A data visualization library built on D3 and React that provides ready-made, themeable chart components with server-side rendering support.

## Install

Save in your project root:

# Nivo — Rich Data Visualization Components for React

## Quick Use
```bash
npm install @nivo/bar
```
```jsx
import { ResponsiveBar } from '@nivo/bar';
const data = [
  { country: 'US', value: 120 },
  { country: 'DE', value: 80 },
  { country: 'JP', value: 95 }
];
function MyChart() {
  return <ResponsiveBar data={data} keys={['value']} indexBy="country" />;
}
```

## 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/

---
Source: https://tokrepo.com/en/workflows/bb9da5f7-4361-11f1-9bc6-00163e2b0d79
Author: AI Open Source