OSS Tanbou
View on GitHubProject website

build declarative React charts on D3 with SVG, Canvas, responsive layouts, theming, motion, and SSR

OSS scale score Not calculatedOSS health 80
About these scores

OSS scale score is an unbounded metric that log-compresses and weights Stars, Watchers, Forks, and Contributors. Discovery score is the current OSS scale score minus the score at discovery. Update pace is commits in the last 30 days, growth momentum is the OSS scale score difference within the recent observation window, and OSS health is a 0–100 rating based on available recency, Community Health, and release data.

Stars
14,105
Primary language
TypeScript
License
MIT
Repository last updated
Jul 21, 2026
On this page

Overview

nivo is a family of React data-visualization components built on D3. Applications add the core package plus chart-specific packages such as bar or line and can use responsive layouts, themes, patterns, gradients, motion, and SVG or Canvas rendering through React components.

Features and best fit

Based on official documentation; not hands-on tested · Content checked:

Key features

Compose visualization from chart-specific packages

Install @nivo/core plus packages such as @nivo/bar, then pass data, scales, axes, and other configuration to React components for declarative chart construction.

Sources: [2][3][4]

Choose SVG, Canvas, responsive layouts, themes, and motion according to the interface

The README lists SVG, HTML, Canvas charts, responsive components, theming, patterns, gradients, react-spring motion, and server-side rendering among the main capabilities.

Sources: [2]

Best fit

Fits dashboards and analytical interfaces that want one React-oriented chart system

It works well when a product needs several chart types under shared React conventions for theming and interaction.

Sources: [2]

Before adoption

Select the rendering backend according to data volume and interaction needs

SVG and Canvas differ in DOM cost, styling flexibility, and interaction patterns. For large or frequently updated datasets, choose the backend and component based on behavior rather than appearance alone.

Sources: [2]

Keep 0.99.0 packages aligned and confirm the supported React range

The latest release is v0.99.0 and the core and bar packages are also 0.99.0. The core package accepts React 16.14 through 19 as a peer dependency, so related @nivo/* packages should be kept on the same release line.

Sources: [5][3][4]

Official sources

  1. [1]plouc/nivo repository(2026-09-30)
  2. [2]nivo README(2026-09-30)
  3. [3]@nivo/core 0.99.0 package metadata(2026-09-30)
  4. [4]@nivo/bar 0.99.0 package metadata(2026-09-30)
  5. [5]nivo v0.99.0 release(2026-09-30)
  6. [6]nivo MIT license(2026-09-30)
Supplemental curator note

nivo is split into chart-specific @nivo/* packages. In 0.99.0, @nivo/core accepts React 16.14 through 19 as a peer dependency. Pick only the chart packages and rendering backends the application needs and keep their versions aligned.

Try it in 3 steps

  1. 1

    Install nivo core and Bar 0.99.0

    Add the core and one chart package on the same release line.

    npm install @nivo/core@0.99.0 @nivo/bar@0.99.0
  2. 2

    Import ResponsiveBar and define data

    Prepare a minimal dataset and the responsive bar component.

    import { ResponsiveBar } from '@nivo/bar'; const data = [{ country: 'JP', value: 42 }];
  3. 3

    Render the bar chart

    Render it inside a container with height, then add axes, themes, colors, and interactions as needed.

    <ResponsiveBar data={data} keys={['value']} indexBy="country" />
Check the official README

Growth

Growth trends · Last 30 days

14,105 Stars

Trend data is still being collected.

Built with

Categories and tags

Categories

Tags

GitHub data

GitHub dataView detailed GitHub data
View on GitHub

GitHub Topics

  • canvas
  • charts
  • components
  • d3js
  • dataviz
  • isomorphic
  • react
  • svg
Stars
14,105
Forks
1,082
Watchers
70
Open issues
52
Owner type
User
Primary language
TypeScript
License
MIT
Repository last updated
Jul 21, 2026
Write a related article

Share a guide or use case for this OSS in Markdown. Articles are published after administrator approval.

Report incorrect information

Tell us if any listing information is incorrect or outdated.

After reading this page, do you know what to do next?