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.

Answer 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.

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

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

Answer 4

To get rid of the guidelines and keep the labels use

.tick line {
  opacity: 0;
}

Answer 5

just need to update the css with

.tick line {
display: none;
}