Skip to content
Get packs

Guide · Open source

How to use nivo: install, build a chart and render it

Updated · written with AI from the project's own documentation and checked against our catalogue data

nivo is a set of React components for drawing charts and other data visualizations on web pages. It is built on top of the d3 library and lets you describe the chart you want instead of drawing it by hand. This guide shows you how to install it, what it needs, and what you can do with it once it is set up.

nivoplouc/nivo · ★ 14.1k · MIT

Quick start

  1. 1Check prerequisites. Make sure you have Node.js, Yarn or npm, and a React project.
  2. 2Install the core package. Run yarn add @nivo/core to add the base nivo package.
  3. 3Add a chart package. Run yarn add @nivo/bar, or another scoped package for the chart type you need.
  4. 4Pick a chart type. Browse the Components Explorer at nivo.rocks to find the chart and its rendering option.
  5. 5Build and style the chart. Use the component in your React code and adjust it with the guides on theming, colors and axes.

What do you need before you install nivo?

nivo is a React library, so you need a React project. The source lists Node.js, Yarn or npm, and React as prerequisites. nivo is installed with a package manager rather than as a standalone app.

  • Node.js
  • Yarn or npm
  • React

Install nivo with yarn

You install the core package first, then add the scoped @nivo packages for the chart types you plan to use. The README's example installs the core package together with the bar chart package.

yarn add @nivo/core @nivo/bar

Choose the chart package you need

Each chart type lives in its own scoped package under @nivo, so you only add the ones your project uses. The README points to the Components Explorer at nivo.rocks for the full list of packages and components.

  • Install @nivo/core in every project that uses nivo.
  • Add one or more chart packages, such as @nivo/bar for bar charts.
  • Check the Components Explorer for the complete list of packages.

Pick a rendering option: SVG, HTML or canvas

nivo offers SVG, HTML and canvas charts. The features list links to filtered views of the Components Explorer for each type, so you can compare them before choosing one for your chart.

  • SVG charts
  • HTML charts
  • Canvas charts

Customize, animate and make charts responsive

The README lists customization, theming, patterns and gradients as features. Motion and transitions are powered by react-spring. Charts are also described as responsive. The guides cover axes, colors, legends, gradients, patterns and theming in more detail.

  • Axes
  • Colors
  • Legends
  • Gradients
  • Patterns
  • Theming

Use server-side rendering and the HTTP API

According to the README, nivo supports server side rendering and an HTTP API. The README does not describe how to set these up, so check the documentation at nivo.rocks before you rely on them in production.

What people use it for

  • Adding bar charts to a React web app dashboard
  • Rendering charts on the server as well as in the browser
  • Creating animated chart transitions with react-spring
  • Building SVG, HTML or canvas charts from one library

Frequently asked questions

Is nivo free to use?

nivo is released under the MIT licence, as shown in the README and the licence badge. You can check the full terms in the LICENSE.md file in the plouc/nivo repository.

How do I install nivo?

Install it with a package manager. The README uses yarn add @nivo/core @nivo/bar, which installs the core package and a bar chart package.

What do I need to run nivo?

The source lists Node.js, Yarn or npm, and React as prerequisites. nivo components are React-specific, so they must be used inside a React project.

Does nivo work without React?

No, according to the source. The components are React-specific, so projects that do not use React cannot use nivo directly.

How does nivo compare to Recharts, Victory, Chart.js or Apache ECharts?

The source lists these as comparable projects but does not compare them in detail. The README's stated differentiators are server side rendering and fully declarative charts. Test the options against your own needs.

Can nivo render charts on the server?

The README says nivo supports server side rendering and an HTTP API. It does not explain the setup, so consult the documentation at nivo.rocks.

New agent skills, repos and AI tools — every week

The best new skills and open-source projects, the fastest-growing repos, and one free prompt. Five minutes to read. Unsubscribe anytime.

Our verdict

nivo suits React developers who want declarative charts that can be rendered as SVG, HTML or canvas and animated with react-spring. It is not a fit for people who do not write code, for projects that do not use React, or for anyone who needs a ready-made dashboard application rather than building blocks.

Install options & downloads