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.

Sophi

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.

Bogoch

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. – Swafford

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

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

Discursive

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

Affair

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

Answer 4

To get rid of the guidelines and keep the labels use

.tick line {
  opacity: 0;
}

Macbeth

Answer 5

just need to update the css with

.tick line {
display: none;
}

Themistocles