nivo
React chart components for building data visualizations, built on d3.
- Stars
- 14.1k
- Forks
- 1.1k
- Licence
- MIT
- Language
- TypeScript
- Last update
- 4 months ago
- Type
- Library
What it is
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.
- Add a bar or line chart to a React dashboard
- Render charts on the server for faster initial page loads
- Customize chart colors, patterns, and gradients through theming
- Make charts responsive to their container size
Great for
- 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
Not ideal for
- 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
How to get it
- 1
Install with a package manager
You'll need: Node.js · Yarn or npm · React
Install core and a chart package
yarn add @nivo/core @nivo/bar - 2
Run it
- Install @nivo/core and the chart package you need with yarn add
- Import the chart component from its @nivo package into a React component
- Pass your data and options as props to render the chart
- Browse the Components Explorer at nivo.rocks to pick other chart types
- 3
Get the most out of it
- Use the interactive playground at nivo.rocks to test options before coding
- Apply theming to match your app's visual style
- Use canvas charts for large datasets, per the README's feature list
- Use server-side rendering if initial page speed matters
Downloads
Strengths
- 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
Trade-offs
- 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
How it compares
| Project | Stars | Type | Level | Updated | Best for |
|---|---|---|---|---|---|
| nivo (this) | 14.1k | Library | intermediate | 4 months ago | React developers who need charts in a web app |
| recharts | 27.7k | Library | beginner | 4 days ago | React developers who need standard charts such as line, bar or similar graphs in a web app |
| Chart.js | 67.8k | Library | intermediate | 14 days ago | Web developers adding standard charts such as line or bar charts to a site |
| G2 | 12.7k | Library | intermediate | 8 days ago | Front-end developers adding charts to a web dashboard |
| three.js | 117k | Library | intermediate | 4 days ago | Web developers adding interactive 3D graphics to a website |
| anime | 74.2k | Library | beginner | 3 months ago | Front-end developers adding motion to websites or web apps |
Stats synced from GitHub. The assessment above was drafted with AI from the project's README on 2026-10-29 and may miss recent changes — check the README before relying on a command. MIT licence: free to use, modify and distribute, including commercially, as long as you keep the copyright notice.