plouc/nivo

★ 14,026TypeScriptAudience · developerComplexity · 2/5Setup · easy

Mindmap

mindmap
  root((nivo))
    Chart types
      Bar line pie
      Server-side
      Canvas SVG
    Tech stack
      React D3
      react-spring
      TypeScript
    Customization
      Colors themes
      Axes legends
      Animations
    Resources
      nivo.rocks playground
      Discord community
      Open Collective

mindmap root((nivo)) Chart types Bar line pie Server-side Canvas SVG Tech stack React D3 react-spring TypeScript Customization Colors themes Axes legends Animations Resources nivo.rocks playground Discord community Open Collective

Click or tap to explore — scroll the page freely

Things people build with this

USE CASE 1

Add a responsive bar chart or line chart to a React app by installing a single @nivo/bar or @nivo/line package

USE CASE 2

Switch to canvas rendering for large datasets that would slow down SVG-based charts

USE CASE 3

Generate charts on a Node.js server without a browser for PDFs or server-side reports

USE CASE 4

Explore every chart type and copy ready-to-use configuration code from the interactive playground at nivo.rocks

Tech stack

TypeScriptReactD3react-springNode.js

Getting it running

Difficulty · easy Time to first run · 30min

Install @nivo/core plus only the chart packages you need (e.g. @nivo/bar), no other infra required.

Check the repository for specific license terms.

In plain English

nivo is a collection of React components for building data visualizations such as bar charts, line charts, pie charts, and other chart types. It is built on top of D3, which is a widely used JavaScript library for drawing data-driven graphics, and uses react-spring for animations and transitions. If you are building a React app and need to display data in visual form, nivo gives you ready-made chart components that can be dropped in and configured through props. The library is split into scoped packages, so you only install the chart types you actually need. A typical install looks like adding @nivo/core and then a specific package such as @nivo/bar for bar charts. Charts are available in three rendering modes: SVG (vector graphics, good for small datasets and accessibility), HTML canvas (better for large datasets), and server-side rendering for generating charts in a Node.js environment without a browser. Charts are highly customizable. You can adjust colors, legends, axes, gradients, fill patterns, and the overall visual theme. Animations and transitions are built in using react-spring and can be tuned or turned off. Charts are also responsive by default, meaning they resize to fit their container. The project website at nivo.rocks includes an interactive component playground where you can explore every chart type, adjust settings, and copy the resulting code. Full documentation and guides covering axes, colors, legends, gradients, and theming are also on the site. Community discussion happens on a Discord server. The project is funded through Open Collective and accepts both individual backers and corporate sponsors.

Copy-paste prompts

Prompt 1

I'm building a React dashboard and want to add a bar chart with custom colors and axis labels using nivo. Show me the setup code including the npm install and component props.

Prompt 2

How do I switch a nivo chart from SVG to HTML canvas rendering for better performance with a large dataset?

Prompt 3

Set up a nivo line chart in React that is responsive, has animated transitions, and uses a custom color theme.

Prompt 4

I need to generate a pie chart image on a Node.js server without a browser. How do I use nivo's server-side rendering support?

Open on GitHub → Explain another repo

← plouc on gitmyhub — every repo by this author, as a profile.

Verify against the repo before relying on details.