nivo vs Recharts
Which should you use? A side-by-side look at what each one does, who it suits, what it costs, how hard it is to set up, and where each falls short.
Open source · MIT
React chart components for building data visualizations, built on d3.
Open source · MIT
A React charting library built on D3 for drawing charts from declarative components.
The short answer
Choose nivo if you need…
- React developers who need charts in a web app
- Teams that want charts rendered on the server as well as in the browser
- Projects that want animated transitions via react-spring
- Developers who want SVG, HTML, or canvas chart options from one library
Choose Recharts if you need…
- React developers who need standard charts such as line, bar or similar graphs in a web app
- Teams that prefer declarative, component-based chart code
- Single-page applications installed through npm
- Developers who want SVG-based charts with minimal dependencies
Side-by-side
| nivo | Recharts | |
|---|---|---|
| Type | Library | Library |
| Price | Free and open source | Free and open source |
| Licence | MIT | MIT |
| GitHub stars | 14.1k | 27.7k |
| Setup difficulty | Intermediate | Beginner |
| How you get it | Install with a package manager | Install with a package manager |
| Main language | TypeScript | TypeScript |
| Last code update | 4 months ago | 4 days ago |
What each one is
nivo
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 offers declarative charts, meaning you describe what you want and the component draws it. According to the README, it also supports server-side rendering and an HTTP API.
Recharts
Recharts is a charting library for React applications, built on top of D3. You draw charts by composing React components such as a line chart, axes, a grid and a tooltip, each of which is a separate part you can combine. It renders charts as native SVG and is aimed at making charts in React apps straightforward.
Best for
nivo
- React developers who need charts in a web app
- Teams that want charts rendered on the server as well as in the browser
- Projects that want animated transitions via react-spring
- Developers who want SVG, HTML, or canvas chart options from one library
Recharts
- React developers who need standard charts such as line, bar or similar graphs in a web app
- Teams that prefer declarative, component-based chart code
- Single-page applications installed through npm
- Developers who want SVG-based charts with minimal dependencies
Strengths
nivo
- Covers many chart types across SVG, HTML, and canvas renderers
- Supports server-side rendering and theming, per the README
- Large community with active discord and an interactive playground
Recharts
- Declarative API where each chart part is an independent React component
- Native SVG output with a stated focus on being lightweight with minimal dependencies
- MIT licensed with active development and a documentation site and storybook
Not ideal for
nivo
- People who do not write code, since it requires React components to be assembled in a project
- Projects not using React, because the components are React-specific
- Users who need a ready-made dashboard application rather than building blocks
Recharts
- Non-programmers who want to make charts without code, since it requires writing React components
- Projects not using React, because the library is built around React components
- Very large datasets needing canvas or GPU rendering, since the README only describes SVG support
Trade-offs
nivo
- Requires working knowledge of React and JavaScript/TypeScript
- README does not fully list every component, so the Components Explorer must be consulted
- Each chart type is a separate package, so setup involves choosing the right ones
Recharts
- Only suited to React projects, so it does not fit other frameworks by default
- Installation asks you to also install react-is matching your React version, an extra step for beginners
- The README excerpt provides limited detail on specific chart types and advanced options; see the docs site
Getting started
nivo
Install core and a chart package
yarn add @nivo/core @nivo/barFrequently asked questions
What is the difference between nivo and Recharts?
nivo: React chart components for building data visualizations, built on d3. Recharts: A React charting library built on D3 for drawing charts from declarative components. nivo suits react developers who need charts in a web app, while Recharts suits react developers who need standard charts such as line, bar or similar graphs in a web app.
Are nivo and Recharts free?
nivo: Free and open source. Recharts: Free and open source.
Which is easier to set up, nivo or Recharts?
Recharts is easier to get started with (rated beginner); nivo is rated intermediate and usually needs more setup.
Is nivo or Recharts more popular?
Recharts has more GitHub stars (27.7k) than nivo (14.1k). Popularity isn't the same as fit — check which one matches your use case above.
What are other alternatives to nivo and Recharts?
Other options people compare them with include Chart.js, G2, three.js, Anime.js, Rough.js.
Keep comparing
Built from our catalogue entries for both products: open-source details come from each project's README (AI-assisted, refreshed weekly) and GitHub data; AI-tool details are editorial. Spotted something wrong? Let us know from either product's page.