How do you remove the background gridlines in nvd3.js?

Question

I am making a bar graph in nvd3.js, similar to this example: http://nvd3.org/ghpages/discreteBar.html. I was wondering if there was a way to remove the gridline so the background would be plain white. All of the examples use gridlines. I also checked the source code and didn't see anything in the discreteBar model that would make this possible.

Solution 1

You can select those grid lines in your CSS and set their opacity 0:

.tick {
  opacity: 0;
}

If you still want to see the baseline, you could modify this to:

.tick:not(.zero) {
  opacity: 0;
}

Use your browser's inspector tools to see what class the individual elements have that you want to modify and use the power of CSS.

Solution 2

.tick {
  opacity: 0;
}

Doesn't work for the vertical lines in the discreteBar chart because they use inline css to set the opacity to 1. But this works:

.tick {
  display: none;
}

This will also hide the labels on axes. If you want to remove the lines but keep the labels, use:

.tick line {
  display: none;
}

Solution 3

I found a more specific solution that worked well:

(This removes all grids, but you can be selective, ie: .y1.axis)

.nvd3.multiChart .axis .nv-axis line {
stroke: none;
fill: none;
}

Solution 4

To get rid of the guidelines and keep the labels use

.tick line {
  opacity: 0;
}

View more solutions

Comments

[Ben P.]

It appears that the current nvd3.js uses inline style attributes to add the tick lines (at least when using the discrete bar chart) so CSS doesn't work in this case as the inlined style="opactity: 1" takes precedence.

[linqu]

you may want to override inlined style by using opacity: 0 !important;

[CMerrill]

Not sure if this has changed in nvD3, but I had to use this: .nv-y1 .tick line { stroke: none; fill: none; }