Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/plouc/nivo
nivo provides a rich set of dataviz components, built on top of the awesome d3 and React libraries
https://github.com/plouc/nivo
canvas charts components d3js dataviz isomorphic react svg
Last synced: 7 days ago
JSON representation
nivo provides a rich set of dataviz components, built on top of the awesome d3 and React libraries
- Host: GitHub
- URL: https://github.com/plouc/nivo
- Owner: plouc
- License: mit
- Created: 2016-04-16T03:27:56.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2024-08-15T22:24:34.000Z (3 months ago)
- Last Synced: 2024-10-20T08:20:35.496Z (16 days ago)
- Topics: canvas, charts, components, d3js, dataviz, isomorphic, react, svg
- Language: TypeScript
- Homepage: https://nivo.rocks
- Size: 398 MB
- Stars: 13,147
- Watchers: 78
- Forks: 1,027
- Open Issues: 148
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: CONTRIBUTING.md
- Funding: .github/FUNDING.yml
- License: LICENSE.md
Awesome Lists containing this project
- awesome-react-cn - nivo - Provides a rich set of data visualization components, built on top of the D3 and React libraries (Uncategorized / Uncategorized)
- awesome - plouc/nivo - nivo provides a rich set of dataviz components, built on top of the awesome d3 and React libraries (TypeScript)
- awesome-canvas - nivo - nivo provides a rich set of dataviz components, built on top of the awesome d3 and React libraries   (Libraries / Charts Libraries)
- my-awesome-list - nivo
- awesome-d3 - nivo - Dataviz components for React with isomorphic ability [bar, line, area, bubble, chord, heatmap] (Charts)
- awesome-react - nivo - It provides a rich set of data visualization components, built on top of the D3 and React libraries.
- awesome-react - nivo - Provides a rich set of dataviz components, built on top of the awesome d3 and Reactjs libraries.  (UI Components / Data Visualization)
- awesome-ccamel - plouc/nivo - nivo provides a rich set of dataviz components, built on top of the awesome d3 and React libraries (TypeScript)
- awesome-learning-resources - nivo - Provides a rich set of data visualization components, built on top of the D3 and React libraries (Uncategorized / Uncategorized)
- awesome-d3 - nivo - Dataviz components for React with isomorphic ability [bar, line, area, bubble, chord, heatmap] (Charts)
- awesome - nivo
- awesome-list - nivo
- best-of-react - GitHub - 6% open · ⏱️ 12.05.2024): (Data Visualization)
- awesome-react - nivo - nivo provides a rich set of dataviz components, built on top of the awesome d3 and Reactjs libraries ` 📝 4 days ago` (React [🔝](#readme))
- awesome-react - nivo - Provides a rich set of data visualization components built on top of the D3 and React libraries (**Awesome React** [](https://github.com/sindresorhus/awesome) / React)
- awesome-d3 - nivo - Dataviz components for React with isomorphic ability [bar, line, area, bubble, chord, heatmap] (Charts)
- awesome - plouc/nivo - nivo provides a rich set of dataviz components, built on top of the awesome d3 and React libraries (TypeScript)
- StarryDivineSky - plouc/nivo
README
[](#backers)
[](#sponsors)
[![License][license-image]][license-url]
[![GitHub Actions][actions-image]][actions-url]
[![NPM version][npm-image]][npm-url]
[](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)]
## 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