Highchart - show / hide an y-Axis without hiding the series

Question

I\'m working with Highchart. I\'ve got a multiple series graph in which each series have their own y-axis.

pretty much like this one (jsfiddle)

when we cli

Answer 1

We can hide Yaxis label without hiding the y-Axis without hiding the series by returning the empty string as follows:

yAxis: {
       title: '',
       labels: {
                formatter: function() {
                    return '';
                },
                style: {
                    color: '#4572A7'
                }
        }

},

Answer 2

It's actually gotten simpler. You only have to set the yAxis title attribute to false:

yAxis: {
   title: false
},

Here is an example: jsfiddle example

Answer 3

For newer versions (I'm using the 6.2.0), the yAxis property has a parameter called gridLineWidth. Just set it to 0 and the grids for that axis are going to disappear. In this JSFiddle there is an example of it.

However, if you are in styled mode this it's trickier. Here, you have to set a className for the target axis and then set the CSS like this:

.highcharts-yaxis-grid {
    &.right-axis {
      path {
        stroke: none;
      }
    }
  }

For example, this will make dissapear the grids of the axis with a className set as right-axis. This allow to have different styles for the multiple axis.

Answer 4

Highcharts 4.1.9+

Since 4.1.9, there is an option Axis.visible which can be used to show/hide an axis, demo: http://jsfiddle.net/3sembmfo/36/

Older versions of Highcharts

It's a new feature for Highcharts 3.0 - that allows to update axes in realtime: chart.yAxis[0].update(object) - as object takes the same options as for creating chart. For example:

        chart.yAxis[0].update({
            labels: {
                enabled: false
            },
            title: {
                text: null
            }
        });

And jsFiddle: http://jsfiddle.net/39xBU/2/

EDIT:

Use below snippet to hide/show axis by just calling axis.hide() and axis.show(). Live demo: http://jsfiddle.net/39xBU/183/

(function (HC) {
    var UNDEFINED;
    HC.wrap(HC.Axis.prototype, 'render', function (p) {
        if (typeof this.visible === 'undefined') {
            this.visible = true;
        }
        if(this.visible) {
            this.min = this.prevMin || this.min;
            this.max = this.prevMax || this.max;
        } else {
            this.prevMin = this.min;
            this.prevMax = this.max;
            this.min = UNDEFINED;
            this.max = UNDEFINED;
        }

        this.hasData = this.visible;

        p.call(this);
    });

    HC.Axis.prototype.hide = function () {
        this.visible = false;
        this.render();

        HC.each(this.plotLinesAndBands, function (plotLine) {
            plotLine.render();
        });
    };

    HC.Axis.prototype.show = function () {
        this.visible = true;
        this.render();

        HC.each(this.plotLinesAndBands, function (plotLine) {
            plotLine.render();
        });
    };
})(Highcharts);