Question

For the NVD3 multiBarChart, how can you remove zero-value bars? I've tried setting the y-value to null, but they won't go away.

I unfortunately don't have enough reputation to post an image, so here's ascii showing the issue. There are two stacked series in the following ascii chart--X and Z, with underscores (_) representing zero-value bars in the Z series:

|
|       _
|     _ X   
|   _ X X X 
| _ X X X X X
| X X X X X X
          Z Z
            Z

What I need is the following:

|
|       
|       X   
|     X X X 
|   X X X X X
| X X X X X X
          Z Z
            Z

Edit: here is the JSFiddle for the graph http://jsfiddle.net/dnn4K/1/

I've included an attempted fix of mine, which somewhat works (but not in the fiddle for some reason). The attempted fix is finding the first rectangle through a CSS selector and looping through them with rect.next(), setting the height to 0 if the height is 1. The reason this isn't working for me is because the rectangles don't exist by the time the function is called--so now I need to figure out how to get the function to run after the animation is done.

Was it helpful?

Solution

Actually I found that having to modify the nvd3 source code was not a real solution there.

So I simply added an overriding CSS rule that hides any exactly 1-pixel-height rect out there.

Still not optimal, but we'll have to wait for a new version of nvd3 with hopefully a fully configurable model to do that properly.

.nvd3 rect[height="1"] {
  display: none !important;
}

OTHER TIPS

Ended up finding out the answer. In the nv.d3.js file, there is the following line of code:

.attr('height', function(d,i) {
          return Math.max(Math.abs(y(d.y + (stacked ? d.y0 : 0)) - y((stacked ? d.y0 : 0))),1); //Min value of stacked bar charts set here
        })

This needs to be changed to the following:

.attr('height', function(d,i) {
          return Math.max(Math.abs(y(d.y + (stacked ? d.y0 : 0)) - y((stacked ? d.y0 : 0))),0); //Min value of stacked bar charts set here
        })

And that's it. The min value is literally just set as a 1 instead of a 0 for stacked bar charts. This was in the multiBar function of the nv.d3.js file around line 7804. Hopefully this helps someone else with the same issue.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top