nivo

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.