Nvd3 line diagram how to remove grid lines and yaxis

Question

I made a line chart with the viewfinder.

Here is my source code

var chart = nv.models.lineWithFocusChart(); // chart.transitionDuration(500); chart.xAxis .tickFormat(d3.format(',g')); chart.xAxis .axisLabel("Date"); chart.xAxis.tickPadding(0); chart.x2Axis .tickFormat(d3.format(',g')); chart.yAxis .tickFormat(d3.format(',.2g')); chart.y2Axis .tickFormat(d3.format(',.2h')); // chart.showYAxis(false); 

I want to remove the labels of the y axis (i.e. I do not want the y axis to have no number).

I also want to delete all grid lines.

is there something like chart.yAxis.somethinghere to do this?

thanks

Answer 1

.showYAxis(false) should remove the y axis.

If this does not work, you can apply .nv-y text{display: none;} as a style.

Use the .tick line {display: none;} style to get rid of the grid lines and keep the x axis.

Get rid of all axes and lines with .tick{display: none;}

:)

Answer 2

To uncheck the y axis

 .nv-axis.nv-y .tick line { display:none; } 

To uncheck the x axis

 .nv-axis.nv-x .tick line { display:none; } 

To remove a label on the x axis

 .showXAxis(false) 

To remove a label on the y axis

 .showYAxis(false) 

To delete all grid lines

 .nv-axis .tick line { display:none; } 

Answer 3

To remove grid lines:

  .nv-axis .tick line { display:none; } 

And the axes can be made more directly:

 .showYAxis(false) .showXAxis(false) 

Answer 4

To hide the grid line, just add this to your CSS

 .tick line { display: none; } 

and for the x axis just add .showYAxis(false)

if you want to remove only the yAxis line and save the ticks, you can do this with CSS:

 .nvd3 .nv-axis.nv-y path.domain{ stroke-opacity: 0; } 

see plunker here.