[![Travis CI][travis-image]][travis-url] [![NPM version][npm-image]][npm-url] [![Dependencies][gemnasium-image]][gemnasium-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.

Features

• supports d3 v4
• composable
• responsive charts (<Responsive* /> components)
• highly customizable
• motion/transitions, even the non-d3 based components (DOM managed by React) support transitions within the help of react-motion
• component playground
• exhaustive documentation
• isomorphic rendering
• support for SVG and HTML (I'm also considering canvas support)
• placeholder components for advanced customization (<*Placeholders /> components)
• server side rendering API

Components

• Bar
  • <Bar />
  • <ResponsiveBar />
• Line
  • <Line />
  • <ResponsiveLine />
• Pie
  • <Pie />
  • <ResponsivePie />
• Bubble
  • <Bubble />
  • <ResponsiveBubble />
  • <BubblePlaceholders />
  • <ResponsiveBubblePlaceholders />
• TreeMap
  • <TreeMap />
  • <ResponsiveTreeMap />
  • <TreeMapHTML />
  • <ResponsiveTreeMapHTML />
  • <TreeMapPlaceholders />
  • <ResponsiveTreeMapPlaceholders />
• Calendar
  • <Calendar />
  • <ResponsiveCalendar />
• Chord
  • <Chord />
  • <ResponsiveChord />

HTTP API

• <Bar />
• <Line />
• <Pie />
• <Bubble />
• <TreeMap />
• <Chord />

Guides

• colors

Repositories

• nivo - the nivo library
• nivo-api - the nivo http api
• nivo-api-docker - a Docker image for the nivo http api
• nivo-generators - the data generators used for nivo-website and http API samples
• nivo-website - the source for the nivo website

Credits

• d3
• react
• react-motion
• …

[npm-image]: [npm-image]: https://img.shields.io/npm/v/nivo.svg?style=flat-square [npm-url]: https://www.npmjs.com/package/nivo [travis-image]: https://img.shields.io/travis/plouc/nivo.svg?style=flat-square [travis-url]: https://travis-ci.org/plouc/nivo [gemnasium-image]: https://img.shields.io/gemnasium/plouc/nivo.svg?style=flat-square [gemnasium-url]: https://gemnasium.com/plouc/nivo