Nivo

nivo provides a rich set of dataviz components, built on top of the awesome...

README

[![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/workflow/status/plouc/nivo/CI.svg?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