Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

nvd3 line chart, how to remove gridlines and yaxis

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

like image 662
user3171919 Avatar asked Feb 26 '14 22:02

user3171919


2 Answers

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;
    }
like image 98
Parth Patel Avatar answered Nov 08 '22 04:11

Parth Patel


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

:)

like image 9
JasTonAChair Avatar answered Nov 08 '22 03:11

JasTonAChair