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 just have to pick the scoped @nivo packages according to the charts you wish to use.

yarn add @nivo/bar @nivo/sankey ...

Features

• Highly customizable
• Motion/transitions, powered by react-motion
• Component playground
• Exhaustive documentation
• Isomorphic rendering
• SVG charts
• HTML charts
• Canvas charts
• server side rendering API
• SVG patterns
• Gradients
• responsive charts

Discussion

Join the nivo discord community.

Components

• Bar @nivo/bar
  • <Bar/>
  • <ResponsiveBar/>
  • <BarCanvas/>
  • <ResponsiveBarCanvas/>
• Bubble @nivo/circle-packing
  • <Bubble/>
  • <ResponsiveBubble/>
  • <BubbleHtml/>
  • <ResponsiveBubbleHtml/>
  • <BubbleCanvas/>
  • <ResponsiveBubbleCanvas/>
• Calendar @nivo/calendar
  • <Calendar/>
  • <ResponsiveCalendar/>
• Chord @nivo/chord
  • <Chord/>
  • <ResponsiveChord/>
  • <ChordCanvas/>
  • <ResponsiveChordCanvas/>
• HeatMap @nivo/heatmap
  • <HeatMap/>
  • <ResponsiveHeatMap/>
  • <HeatMapCanvas/>
  • <ResponsiveHeatMapCanvas/>
• Line @nivo/line
  • <Line/>
  • <ResponsiveLine/>
• Pie @nivo/pie
  • <Pie/>
  • <ResponsivePie/>
• Radar @nivo/radar
  • <Radar/>
  • <ResponsiveRadar/>
• Sankey @nivo/sankey
  • <Sankey/>
  • <ResponsiveSankey/>
• Stream @nivo/stream
  • <Stream/>
  • <ResponsiveStream/>
• Sunburst @nivo/sunburst
  • <Sunburst/>
  • <ResponsiveSunburst/>
• TreeMap @nivo/treemap
  • <TreeMap/>
  • <ResponsiveTreeMap/>
  • <TreeMapHTML/>
  • <ResponsiveTreeMapHTML/>
  • <TreeMapCanvas/>
  • <ResponsiveTreeMapCanvas/>
• Voronoi @nivo/voronoi
  • <Voronoi/>
  • <ResponsiveVoronoi/>

HTTP API

• <Bar/>
• <Bubble/>
• <Chord/>
• <HeatMap/>
• <Line/>
• <Pie/>
• <Radar/>
• <Sankey/>
• <Sunburst/>
• <TreeMap/>

Guides

• colors
• gradients
• patterns

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

Credits

• d3
• react
• react-motion
• …