nvd3 line chart, how to remove gridlines and yaxis

Question

I have made a line chart with view finder.

Here is my initial 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 y axis labels ( i.e. i want no number showing on the y axis).

I also want to remove all the gridlines.

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

Thanks

Parth Patel · Answer 1 · 2016-01-13T10:30:19.710

13

To remove tick on y-axis

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

To remove tick on x axis

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

To remove label on x axis

.showXAxis(false)

To remove label on y axis

.showYAxis(false)

To remove all the grid lines

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

edited Jan 13 '16 at 10:30

answered Jan 13 '16 at 09:48

Parth Patel

3,573
1
24
40

@user3171919 I think you should mark it as an correct answer. – Parth Patel Mar 09 '17 at 04:50

score 9 · Answer 2 · answered Mar 14 '14 at 12:27

9

.showYAxis(false) should remove the y axis.

If that doesn't work, you can apply .nv-y text{display: none;} as a style.

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

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

:)

answered Mar 14 '14 at 12:27

JasTonAChair

1,787
1
16
30

If you want to retain the y-axis label, but not display the values: `.nv-axisMaxMin { display: none; }` – raven Jul 26 '14 at 05:40

score 3 · Answer 3 · answered Oct 15 '14 at 11:24

3

To remove the gridlines:

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

And axes can be done more straightforwardly:

.showYAxis(false)
.showXAxis(false)

answered Oct 15 '14 at 11:24

James

1,717
14
17

Mohamed NAOUALI · Answer 4 · 2016-08-24T12:38:24.540

1

To hide 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 delete only the yAxis line and keep the ticks you can do it with the CSS:

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

see this plunker for example.

edited Aug 24 '16 at 12:38

answered Jul 01 '16 at 11:04

Mohamed NAOUALI

1,972
1
20
28

nvd3 line chart, how to remove gridlines and yaxis

4 Answers4

Linked