discover · compare · collections · requirements · contribute · feed · watching · stats · help with your tokens

plouc/nivo · source

Snapshot 0 · 2026-11-04T12:47:24Z · TypeScript · MIT

GitHub description at capture

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

README at capture

<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](https://opencollective.com/nivo/backers/badge.svg?style=flat-square)](#backers)
[![Sponsors on Open Collective](https://opencollective.com/nivo/sponsors/badge.svg?style=flat-square)](#sponsors)
[![License][license-image]][license-url]
[![GitHub Actions][actions-image]][actions-url]
[![NPM version][npm-image]][npm-url]
[![nivo channel on discord](https://img.shields.io/badge/discord-nivo-61dafb.svg?style=flat-square)](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:

```
yarn add @nivo/core @nivo/bar
```

## Features

- Highly Customizable
- Motion/Transitions, powered by [react-spring](https://react-spring.io)
- [Interactive Components Playground](http://nivo.rocks/)
- [Exhaustive Documentation](http://nivo.rocks/)
- [SVG Charts](http://nivo.rocks/components/?filter=svg)
- [HTML Charts](http://nivo.rocks/components/?filter=html)
- [Canvas Charts](http://nivo.rocks/components/?filter=canvas)
- Server Side Rendering and HTTP API
- [Patterns](http://nivo.rocks/guides/patterns/) & [Gradients](http://nivo.rocks/guides/gradients/)
- [Theming](http://nivo.rocks/guides/theming/)
- Responsive Charts

## Discussion

Join the [nivo discord community](https://discord.gg/n7Ft74f).

## Packages & components

**nivo** is comprised of several packages/components, for a full list,
please use the [Components Explorer](http://nivo.rocks/components/).

## Guides

- [Axes](http://nivo.rocks/guides/axes/)
- [Colors](http://nivo.rocks/guides/colors/)
- [Legends](http://nivo.rocks/guides/legends/)
- [Gradients](http://nivo.rocks/guides/gradients/)
- [Patterns](http://nivo.rocks/guides/patterns/)
- [Theming](http://nivo.rocks/guides/theming/)

## Backers

Donations are welcome to help improving **nivo** [[Become a backer](https://opencollective.com/nivo#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](https://opencollective.com/nivo#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