nivo

weekly downloads2K

versionv0.31.0

licenseunknown

categorydata-viz

Overview

Nivo is a React-based data visualization library that wraps D3.js functionality into declarative, reusable components. It provides 27 chart types including bar charts, line graphs, pie charts, heatmaps, and geographic maps, all designed to work seamlessly within React's component architecture. Unlike direct D3 integrations that require imperative DOM manipulation, Nivo exposes props-based APIs that feel native to React developers.

The library addresses a common pain point: leveraging D3's powerful visualization capabilities without fighting React's reconciliation model. Nivo handles the complexity of D3 lifecycle management internally while exposing clean interfaces for data binding, styling, and interactivity. It supports three rendering modes (SVG, Canvas, HTML) allowing developers to optimize for either quality or performance depending on dataset size.

Nivo is used by teams building analytics dashboards, admin panels, reporting tools, and any application requiring sophisticated data presentation. Its modular package structure means you only bundle the chart types you actually use—installing @nivo/bar doesn't pull in geographic mapping dependencies. The library includes server-side rendering support, making it suitable for Next.js and other SSR frameworks where charts need to render on initial page load.

With 13.7k GitHub stars and active maintenance, Nivo has become a mature choice in the React visualization ecosystem. It ships with comprehensive TypeScript definitions, extensive theming capabilities, and animation support via react-spring. The project maintains an interactive documentation site with live code examples for every chart variant.

Quick Start

typescript

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

const SalesChart = () => {
  const [data] = useState([
    { month: 'Jan', sales: 45000, expenses: 32000, profit: 13000 },
    { month: 'Feb', sales: 52000, expenses: 35000, profit: 17000 },
    { month: 'Mar', sales: 48000, expenses: 33000, profit: 15000 },
    { month: 'Apr', sales: 61000, expenses: 38000, profit: 23000 },
    { month: 'May', sales: 58000, expenses: 36000, profit: 22000 }
  ]);

  return (
    <div style={{ height: 400 }}>
      <ResponsiveBar
        data={data}
        keys={['sales', 'expenses', 'profit']}
        indexBy="month"
        margin={{ top: 50, right: 130, bottom: 50, left: 60 }}
        padding={0.3}
        valueScale={{ type: 'linear' }}
        colors={{ scheme: 'nivo' }}
        borderColor={{ from: 'color', modifiers: [['darker', 1.6]] }}
        axisTop={null}
        axisRight={null}
        axisBottom={{
          tickSize: 5,
          tickPadding: 5,
          tickRotation: 0,
          legend: 'Month',
          legendPosition: 'middle',
          legendOffset: 32
        }}
        axisLeft={{
          tickSize: 5,
          tickPadding: 5,
          tickRotation: 0,
          legend: 'Amount ($)',
          legendPosition: 'middle',
          legendOffset: -40
        }}
        labelSkipWidth={12}
        labelSkipHeight={12}
        labelTextColor={{ from: 'color', modifiers: [['darker', 1.6]] }}
        legends={[
          {
            dataFrom: 'keys',
            anchor: 'bottom-right',
            direction: 'column',
            justify: false,
            translateX: 120,
            translateY: 0,
            itemsSpacing: 2,
            itemWidth: 100,
            itemHeight: 20,
            itemDirection: 'left-to-right',
            itemOpacity: 0.85,
            symbolSize: 20,
            effects: [
              { on: 'hover', style: { itemOpacity: 1 } }
            ]
          }
        ]}
        animate={true}
        motionConfig="gentle"
        tooltip={({ id, value, color }) => (
          <div style={{
            padding: 12,
            background: 'white',
            border: '1px solid #ccc'
          }}>
            <strong style={{ color }}>{id}</strong>: ${value.toLocaleString()}
          </div>
        )}
      />
    </div>
  );
};

export default SalesChart;

Use Cases

Business Intelligence Dashboards: Building admin panels that display KPIs, sales metrics, and operational data with interactive bar charts, line graphs, and area charts that respond to date range filters and drill-down interactions.

Financial Reporting Applications: Creating investment portfolio visualizations with time-series line charts for stock performance, pie charts for asset allocation, and heatmaps for correlation matrices where Canvas rendering handles large historical datasets efficiently.

Analytics Platforms: Implementing customer-facing analytics tools that show website traffic patterns, user behavior flows, and conversion funnels using stream charts, sankey diagrams, and bump charts with custom branding through Nivo's theming system.

Scientific Data Presentation: Displaying research results and experimental data with scatter plots, violin plots, and radar charts that support custom tooltips showing detailed statistical information on hover.

Marketing Campaign Dashboards: Visualizing A/B test results, geographic user distribution with choropleth maps, and engagement metrics using responsive charts that adapt to mobile and desktop viewports automatically.

Pros & Cons

Pros

+Modular architecture allows importing only needed chart types, significantly reducing bundle size compared to monolithic charting libraries
+Server-side rendering support enables charts to render on initial HTML load, critical for SEO and perceived performance in Next.js applications
+Three rendering modes (SVG, Canvas, HTML) provide flexibility to optimize between visual quality and performance based on dataset size
+Declarative React API feels natural to React developers without requiring D3 knowledge for basic usage
+Comprehensive theming system and customization options through props allow matching any design system requirements
+Built-in animations via react-spring create polished transitions without additional animation library dependencies

Cons

−Bundle size per chart type is still relatively large compared to lightweight alternatives due to D3 and animation dependencies
−Deep customization often requires understanding D3 concepts anyway, limiting the abstraction benefit for complex requirements
−Performance with extremely large datasets (10k+ points) can suffer in SVG mode despite Canvas fallback option
−TypeScript type definitions can be overly complex with extensive generics, making advanced customization harder to type correctly
−Documentation examples focus on common use cases but edge cases and advanced patterns require digging through GitHub issues
−Version upgrades sometimes include breaking API changes that require refactoring chart implementations

Alternatives

plotly.jsv3.3.1

The open source javascript graphing library that powers plotly

data-vizgraphingplotting

449K / week

react-chartjs-2v5.3.1

React components for Chart.js

data-vizchartchart-js

React charts

Data viz for React

data-vizdata visualizationReact

367K / week

Install

bash

npm install nivo

bash

pnpm add nivo

bash

bun add nivo

Overview

Quick Start

typescript

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

const SalesChart = () => {
  const [data] = useState([
    { month: 'Jan', sales: 45000, expenses: 32000, profit: 13000 },
    { month: 'Feb', sales: 52000, expenses: 35000, profit: 17000 },
    { month: 'Mar', sales: 48000, expenses: 33000, profit: 15000 },
    { month: 'Apr', sales: 61000, expenses: 38000, profit: 23000 },
    { month: 'May', sales: 58000, expenses: 36000, profit: 22000 }
  ]);

  return (
    <div style={{ height: 400 }}>
      <ResponsiveBar
        data={data}
        keys={['sales', 'expenses', 'profit']}
        indexBy="month"
        margin={{ top: 50, right: 130, bottom: 50, left: 60 }}
        padding={0.3}
        valueScale={{ type: 'linear' }}
        colors={{ scheme: 'nivo' }}
        borderColor={{ from: 'color', modifiers: [['darker', 1.6]] }}
        axisTop={null}
        axisRight={null}
        axisBottom={{
          tickSize: 5,
          tickPadding: 5,
          tickRotation: 0,
          legend: 'Month',
          legendPosition: 'middle',
          legendOffset: 32
        }}
        axisLeft={{
          tickSize: 5,
          tickPadding: 5,
          tickRotation: 0,
          legend: 'Amount ($)',
          legendPosition: 'middle',
          legendOffset: -40
        }}
        labelSkipWidth={12}
        labelSkipHeight={12}
        labelTextColor={{ from: 'color', modifiers: [['darker', 1.6]] }}
        legends={[
          {
            dataFrom: 'keys',
            anchor: 'bottom-right',
            direction: 'column',
            justify: false,
            translateX: 120,
            translateY: 0,
            itemsSpacing: 2,
            itemWidth: 100,
            itemHeight: 20,
            itemDirection: 'left-to-right',
            itemOpacity: 0.85,
            symbolSize: 20,
            effects: [
              { on: 'hover', style: { itemOpacity: 1 } }
            ]
          }
        ]}
        animate={true}
        motionConfig="gentle"
        tooltip={({ id, value, color }) => (
          <div style={{
            padding: 12,
            background: 'white',
            border: '1px solid #ccc'
          }}>
            <strong style={{ color }}>{id}</strong>: ${value.toLocaleString()}
          </div>
        )}
      />
    </div>
  );
};

export default SalesChart;

Use Cases

Pros & Cons

Pros

+Modular architecture allows importing only needed chart types, significantly reducing bundle size compared to monolithic charting libraries
+Server-side rendering support enables charts to render on initial HTML load, critical for SEO and perceived performance in Next.js applications
+Three rendering modes (SVG, Canvas, HTML) provide flexibility to optimize between visual quality and performance based on dataset size
+Declarative React API feels natural to React developers without requiring D3 knowledge for basic usage
+Comprehensive theming system and customization options through props allow matching any design system requirements
+Built-in animations via react-spring create polished transitions without additional animation library dependencies

Cons

−Bundle size per chart type is still relatively large compared to lightweight alternatives due to D3 and animation dependencies
−Deep customization often requires understanding D3 concepts anyway, limiting the abstraction benefit for complex requirements
−Performance with extremely large datasets (10k+ points) can suffer in SVG mode despite Canvas fallback option
−TypeScript type definitions can be overly complex with extensive generics, making advanced customization harder to type correctly
−Documentation examples focus on common use cases but edge cases and advanced patterns require digging through GitHub issues
−Version upgrades sometimes include breaking API changes that require refactoring chart implementations