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

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);

Leave a Comment