plouc / nivo

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

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]

nivo's Issues

Improve tooltip position

For now, tooltip is always placed on right of the current cursor, it could be placed according to container size.

Support for events (onClick etc.)

I noticed there is an onClick prop in chart component, but it's probably not used for anything right now. Do you plan on implementing some basic events with access to data of clicked element? I am currently trying to implement bar chart with onClick event (to filter in hourly data). It should also have formatted tooltip. I really like your library, it has beautiful visuals and very useful options, but I sadly need onclick for my use case.

Add pure react Stack component

Will allow isomorphic rendering, current component being rendered by d3, it's not possible for now.

Add tooltip support on Line component

Re-add missing Sankey from demo site

The title captures the gist of it. The sankey diagram is not on the demo site. It is linked by the README but leads to a blank page. With that in mind, there may be others.

Thanks for the great project!

IE11 endsWith polyfill

I tried to look at the demo at http://nivo.rocks/ using IE11

Error on endsWith:

export var closedCurvePropKeys = curvePropKeys.filter(function (c) {
return c.endsWith('Closed');
});

Polyfill, if you care to add, or you could use ES6-shim as there might be more issues:

if (!String.prototype.endsWith)
String.prototype.endsWith = function(searchStr, Position) {
// This works much better than >= because
// it compensates for NaN:
if (!(Position < this.length))
Position = this.length;
else
Position |= 0; // round position
return this.substr(Position - searchStr.length,
searchStr.length) === searchStr;
};

IE sucks, but some of us are forced to use it exclusively at work.

Some blabbing about the issue:
https://www.sitepoint.com/community/t/endswith-issue-in-ie11/233838

Validate Stack data structure through props

Bubble component

Hello! I'm trying to find a way to group bubbles by color in the same parent so it looks like this:

Is there an easy way to do it?

Feature (or example) request: Zoom

This is a common, but often challenging, interaction. It'd be great to see how it should work in nivo.

Add area and hidden layer legends on Stack component

Add stack tooltip on stream graph

Fix issue with react-motion and TreeMap component

Animation is stuck on TreeMap components when using react-motion for transitions

Add ability to disable text rendering on TreeMap component under a certain size

Something similar to what's available on Bubble component

Add a calendar component

Something similar to https://bl.ocks.org/mbostock/4063318

Bubble components

• <Bubble />
• <RepsonsiveBubble />
• <BubbleD3 />
• <RepsonsiveBubbleD3 />
• <BubblePlaceholders /> with support for html & svg
• <RepsonsiveBubblePlaceholders />

Background nodes appear wrong after round-tripping "leavesOnly"

Steps to reproduce:

1. Go to http://nivo.rocks/#/treemap
2. Click on the leavesOnly toggle.
3. Click on the leavesOnly toggle again.
4. (Bonus) Roll The Dice

Expected result:

• The treemap changes somehow, then changes back to how it looked before.
• Changing source data looks fine

Observed results:

1. Load page:
   
2. Leaves Only, On:
   
3. Leaves Only, Off:
   
4. Roll The Dice:
   

Also

Leaves Only says

Only render leaf nodes (no children).

Shouldn't that be (no parents)?

Add support for tooltip on Stack components

ResponsivePie not rendering anything.

I try to output a Pie chart, but the responsive pie chart only outputs an empty div:

<div style="width: 100%; height: 100%;"></div>

My settings look like this (and I use the sample data from website):

const settings = {
      width: 300,
      height: 300,
      margin: { top: 10, right: 10, bottom: 10, left: 10 },
      innerRadius: 0.9,
      cornerRadius: 3,
      padAngle: 1,
      enableSlicesLabels: false,
      enableRadialLabels: false,
      isInteractive: false,
    };

It does not work if I remove width/height either. Am I doing something wrong?

Add support for tooltip on Bubble components

Problem with http://nivo.rocks

I have tried to visit the website and got an error (waterfox screenshot):

Also, to double-confirm the issue, I have tested it via curl:

stefanos@debian:~$ curl -vI https://nivo.rocks/
*   Trying 104.18.44.131...
* TCP_NODELAY set
* Connected to nivo.rocks (104.18.44.131) port 443 (#0)
* ALPN, offering h2
* ALPN, offering http/1.1
* Cipher selection: ALL:!EXPORT:!EXPORT40:!EXPORT56:!aNULL:!LOW:!RC4:@STRENGTH
* successfully set certificate verify locations:
*   CAfile: /etc/ssl/certs/ca-certificates.crt
  CApath: /etc/ssl/certs
* TLSv1.2 (OUT), TLS header, Certificate Status (22):
* TLSv1.2 (OUT), TLS handshake, Client hello (1):
* TLSv1.0 (IN), TLS header, Unknown (21):
* TLSv1.0 (IN), TLS alert, Server hello (2):
* error:14077410:SSL routines:SSL23_GET_SERVER_HELLO:sslv3 alert handshake failure
* stopped the pause stream!
* Closing connection 0
curl: (35) error:14077410:SSL routines:SSL23_GET_SERVER_HELLO:sslv3 alert handshake failure

As you can see, on the ticket title I use http://nivo.works whereas in curl I use https protocol, because the link used in project description it redirects to https://nivo.rocks.

nivo.rocks: minor typo on button - dices -> dice

On the examples on nivo.rocks there is a button "Roll the dices", which should be "Roll the dice" as dice is already plural (singular is die).

Add flame graph chart

Very few libraries provide a flame graph chart, it could be useful to have one.

Cannot resolve 'file' or 'directory' ./BubbleProps

After Updating to nivo@^0.26.2:
ERROR in .//nivo/lib/components/charts/bubble/index.js
Module not found: Error: Cannot resolve 'file' or 'directory' ./BubbleProps in */node_modules/nivo/lib/components/charts/bubble
@ .//nivo/lib/components/charts/bubble/index.js 41:19-43

https://nivo.rocks/ cert error

ERR_SSL_VERSION_OR_CIPHER_MISMATCH

when trying to access the website

Make a React 0.13 compatible version

Feature Request: Heatmap

A heatmap is a very useful visualization. IMO, it'd be a great addition.

Feature request: Canvas

Opening this so there's a way to track the "I'm also considering canvas support" comment from the README

Labels on Stream Components

Greetings.

Very nice work here!

I made a thing that helps with StreamGraph labels, it may be useful for adding labels your Stream components: https://github.com/curran/d3-area-label

Add breadcrumbs component for hierarchical charts

Charts such as <Bubble/>, <TreeMap/> & <Sunburst/> could benefit of some kind of breadcrumbs component to easily figure out where the node is located in the hierarchy.

Add BarCanvas component

Labels overflow on Pie chart

If I have a pie chart with labels, some labels end up outside of the drawn SVG and are since not shown:

In this image, I gave the SVG tag a gray border color so it is clear what is been cut off.

The code for the chart looks like this:

<Pie 
    data={this.props.chartData}
    height={500} 
    width={500}
    margin={{
      left: 10,
      right: 50,
      top: 10,
      bottom: 10
    }}
    // not relevant other info
 />

Feature Request: Sankey Diagram

Sankey diagrams are excellent tools that are under utilized, but would be great to have within this very nice solution set.

Example: https://bl.ocks.org/mbostock/ca9a0bb7ba204d12974bca90acc507c0

Version on github doesn't match npm published versions

Hi, I'm trying to debug some issues setting up a v2 Mozaik dashboard. The mozaik demo version I'm running has ^1.0.0-alpha.8 in the package.json as a dep but there's only 1.0.0-alpha.4 on github afaict.

FWIW: The rev of mozaik-demo I'm building from is plouc/mozaik-demo@f296609

Add functionality to hide y + x axis completely on bar component

Provide color blind and a11y color palettes

Amongst the already pretty color palettes, provide a11y and color blind friendly palettes.

Animation when changing pie data

Great lib!

I was wondering why there were no animation when pie datas are updated?
It works for the line component for example and its nice.

Negative Values on <Chart />

Hello guys,

I'm trying to display negative values on a chart, they will display <> when all of them are negative, when there's more than one positive, anything below zero will be ignored, is there a way to have minY maxY config?

Regards,

Pie Chart not rendering

Hello, Plouc!

I am trying to use your Nivo package to create a Mozaik widget but I can't get the Pie Chart to work.

I hosted the code at Webpackbin (which is the same code presented at http://nivo.rocks/#/pie/) so that you can see exactly what I am refering to: https://www.webpackbin.com/bins/-Kts4ISztFmDaec8MYZX

It shows the data but not the chart.
What could it be? Thanks!

Fix line/dots depth in StackSlicer component

Feature (or example) request: Brush

This is a common, but often challenging, interaction. It'd be great to see how it should work in nivo.

Add ability to filter stack component layers

We should be able to hide certain layers from the Stack component.

Workflow:

• user clicks on a layer
• if there's more than 1 active layer
  • the layer disappear
  • a small circle having the same color appear to re-activate the hidden layer
  • if user clicks on the circle, the layer becomes active

This feature also have an impact on StackDots component.

Memoization

Some components requires intensive calculations when a property change, those calculations should be memoized in order to improve performance.

• CalendarLayout monthPathAndBBox

Gradient for Line component (or Stream)

Is it possible to fill the area below the line with a gradient?

Example: http://recharts.org/#/en-US/api/AreaChart

Add HeatMapCanvas component

Because HeatMap can contains a lot of nodes, we should provide a canvas alternative to this component.

Add day of week legends on Calendar components

Stream stack tooltip does not display original values in stack tooltip

Values displayed in stack tooltip are impacted by stackOffset, for example the expand offset cause values to be displayed as ratio (0~1).

Add support for svg defs

Ability to customize hovering label

Hello! Is there currently a way to customize the label that shows in when one hovers over a section of a chart? For example, on the following Pie chart:

Say I want to display the number in a friendlier matter by formatting it the same way one formats the other labels (passing a string or a function that receives the node)

Only import from `d3-*` modules

There are a few files which import from d3 which brings in all the d3-* modules even if they aren't used. While webpack & rollup can mitigate this, they still leave many unused functions.

Looking through the code I found these examples:

# src/lib/charts/bubble/BubbleD3.js
import { hierarchy, pack } from 'd3'

# src/lib/scale.js
import { scaleLinear, scaleBand, scalePoint } from 'd3'

# src/lib/charts/labels.js
import d3 from 'd3'

#src/lib/charts/pie/PieD3Svg.js
import d3 from 'd3'

# src/lib/charts/bubble/BubbleD3Svg.js
import d3 from 'd3'

I apologize for the noise if I've simply found some loose ends that aren't used/exported.

Add axis on radar chart