NVD3.js: Where is the documentation? Need help to configure some functionalities

Question

I'm starting to work with NVD3.js and I'm a little lost about the configurations possible with this tool. I want to configure many items like:

• Display x axis label for every bar, currently I have only the even ones displaying:
• I want to configure a click function on the bars, which will redirect to a page passing the x axis as parameter, this link can be displayed on the label, but in this case I need to change it, to be able to click on it.

These are my doubts, can someone help me with the documentation link or with the answer to my questions?

-- EDIT --

Found how to display the label for every bar on x axis:

In the nv.d3.js edit the function nv.models.multiBarChart. In this line: reduceXTicks = true, set the value to false.

or

Just add this line to your nv.addGraph function:

chart.reduceXTicks('false');

Rabassa

As far as I know there is no documentation for NVD3 as yet. – Bel

THe best way to get to know what NVD3 buys you is to read the source. It's pretty well laid out. – Maggard

I feel your pain - it's very frustrating to work with at the moment. – Wax

@Wax But its not so hard! It's a great tool to work, if you have any question post it here in SO. I'm sure someone will help you! – Rabassa

Answer 1

Thanks for all replies, but I've done it by myself:

For displaying x axis label for every bar:

Add chart.reduceXTicks('false'); to your nv.addGraph() function, like this:

nv.addGraph(function () {
    var chart = nv.models.multiBarChart();

    chart.reduceXTicks(false);

    return chart;
});

For adding an event to click on the bars, use this on your chart function:

d3.selectAll("rect.nv-bar").on("click", function (d) { // You can pass d to function to recover x ou y value of the bar
  // Whatever you want to do on click
});

If someone has a better solution, please comment here.

Rabassa

For anybody coming here from rCharts, the equivalent is plot$chart(reduceXTicks=FALSE) – Halves

Answer 2

Development of NVD3 appears to have moved to the nvd3-community fork which has documentation available.

Alewife

I am curious also -- your answer is a lot more helpful than the github.com/novus/nvd3/wiki/API-Documentation link which is really a short list of some common properties and events. Although to be fair the community fork has a lot of gaps in the info -- but it seems to have a comprehensive property list. – Degeneracy

Answer 3

Agreed with shabeer90. There is no documentation for NVD3 (wish there was). D3.js documentation is of course largely in play...

Eupatrid

Answer 4

While not the ideal solution, I find it easier to find out the available configuration options by using the link below and tinkering with the parameters on the right until I get the results I want. It's for an angularjs wrapper to nvd3, but the configuration is pretty much the same, only through JSON instead.

https://krispo.github.io/angular-nvd3/#/historicalBarChart

Shattuck

Answer 5

There is documentation for the API here. None of these tools are going to be useful until someone comes along with an abstraction that simply ingests JSON. Nobody wants to code a damn graph.

https://github.com/novus/nvd3/wiki/API-Documentation

Soukup