[![License][license-image]][license-url] [![GitHub Actions][actions-image]][actions-url] [![NPM version][npm-image]][npm-url]

nivo provides supercharged React components to easily build dataviz apps, it's built on top of d3.

Several libraries already exist for React d3 integration, but just a few provide server side rendering ability and fully declarative charts.

Installation

In order to use nivo, you have to install the @nivo/core package and then choose some of the scoped @nivo packages according to the charts you wish to use:

yarn add @nivo/core @nivo/bar

Features

• Highly Customizable
• Motion/Transitions, powered by react-spring
• Interactive Components Playground
• Exhaustive Documentation
• SVG Charts
• HTML Charts
• Canvas Charts
• Server Side Rendering and HTTP API
• Patterns & Gradients
• Theming
• Responsive Charts

Discussion

Join the nivo discord community.

Packages & components

nivo is comprised of several packages/components, for a full list, please use the Components Explorer.

Guides

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

Backers

Donations are welcome to help improving nivo [Become a backer]

Open Collective Sponsors

Support this project by becoming a sponsor, your logo will show up here with a link to your website. [Become a sponsor]

[license-image]: https://img.shields.io/github/license/plouc/nivo.svg?style=flat-square [license-url]: https://github.com/plouc/nivo/blob/master/LICENSE.md [npm-image]: https://img.shields.io/npm/v/@nivo/core.svg?style=flat-square [npm-url]: https://www.npmjs.com/~nivo [actions-image]: https://img.shields.io/github/actions/workflow/status/plouc/nivo/ci.yml?branch=master&style=flat-square [actions-url]: https://github.com/plouc/nivo/actions [prettier-image]: https://img.shields.io/badge/styled_with-prettier-ff69b4.svg?style=flat-square [prettier-url]: https://github.com/prettier/prettier