Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

NVD3 Charts Remove 0 Value Bars

Tags:

nvd3.js

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.

like image 915
jperezov Avatar asked Mar 13 '14 12:03

jperezov


2 Answers

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;
}
like image 191
vperron Avatar answered Sep 28 '22 04:09

vperron


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.

like image 22
jperezov Avatar answered Sep 28 '22 05:09

jperezov