NVD3 Charts Remove 0 Value Bars

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.

Could you put your working code on [JSFiddle](jsfiddle.net) so someone can help with you problem. — shabeer90, Mar 14 '14 at 12:58
Working on it. I can't get the same code to run on JSFiddle--would you happen to know how to get the external resources working properly for NVD3 on there? I've loaded them all, but it still doesn't seem to work. — jperezov, Mar 14 '14 at 14:14
Make sure your external urls work. Always check the browser console to see if there is any error thrown. — shabeer90, Mar 14 '14 at 14:20
You could avoid passing values with 0 in the data series, but I wouldn't recommend that, it will break the sequence in the date if both First Bar and Second bar does not have data. — shabeer90, Mar 14 '14 at 15:41

score 21 · Accepted Answer · answered Apr 06 '14 at 09:40

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;
}

score 5 · Answer 2 · answered Mar 17 '14 at 19:21

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.

NVD3 Charts Remove 0 Value Bars

2 Answers2