Search code examples
angularjschartsnvd3.jsangularjs-nvd3-directives

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


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


Solution

  • 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 .. :)