How to hide the y-axis and remove ticks from x-axis in angular nvd3

Question

I am using the existing example from angular nvd3 and try to hide the y-axis and remove the ticks from x-axis.So, I have gone through the document and added showYAxis="false" and added ticks: null in x-axis object. But, I am not able to hide the y-axis as well as remove the ticks from x-axis. Kindly, find the below link and let me know my mistake. For y -axis:

 <nvd3 options="options" data="data" showYAxis="false"></nvd3>

For hiding x-axis ticks

 xAxis: {
    axisLabel: 'X Axis',
    ticks: null
  },

http://plnkr.co/edit/6t5bky?p=preview

score 3 · Accepted Answer · edited May 23 '17 at 12:10

3

You can remove Y-axis using css styles.

.nv-y text {
  display: none;
}

You can remove the grid lines as,

.tick {
  display: none;
}

Update:

You can remove the class text in the above style to see the effect.

.nv-y {
    display: none;
}

If you want to display names on the X-Axis for each bar and without grid lines then add line class in the above style as,

.tick line {
      display: none;
    }

Reference: Stackoverflow

Working Plunker

P.S: I have used nvd3 charts but never tried to hide any axis or grid lines. Chart seems to be good without grid lines .. :)

edited May 23 '17 at 12:10

Community

1
1

answered Dec 07 '15 at 07:01

Amarnath

8,121
10
51
79

But, still y-axis line is visible know. I dont what that line too – Karthik Dec 07 '15 at 07:28

score 2 · Answer 2 · answered Jun 26 '16 at 23:44

it's really easy to get that fixed using the charts options that's already exist on angular NVD3. to get the y-axis just add showYAxis: false, and to hide x-axis ticks just add

tickFormat: function(d) {
      return null
    },

into your xAxis options. here is a forked plunker with the options that you are looking for ;)

How to hide the y-axis and remove ticks from x-axis in angular nvd3

2 Answers2