nivo provides a rich set of dataviz components, built on top of the awesome d3 and React libraries

RAW Doc

Repository: plouc/nivo


Stars: 14015

README.md

<a href="https://nivo.rocks"><img alt="nivo" src="https://raw.githubusercontent.com/plouc/nivo/master/nivo.png" width="216" height="68"/></a>

![Backers on Open Collective](#backers)
![Sponsors on Open Collective](#sponsors)
[![License][license-image]][license-url]
[![GitHub Actions][actions-image]][actions-url]
[![NPM version][npm-image]][npm-url]
![nivo channel on discord](https://discord.gg/n7Ft74f)

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:

text
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]

<a href="https://opencollective.com/nivo#backers" target="_blank"><img src="https://opencollective.com/nivo/backers.svg?width=890"></a>

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