28

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 click on the legend item for a series, it hides it and the associated y-axis (using showEmpty:false helped hiding also the name of the axes)

What I'm trying to achieve is hiding the y-Axis of a given series without hiding the series itself.

I tried to hide it by modifying the showAxis property like this : 

serie.yAxis.showAxis = false;

but it doesn't work. Anyone knows how I should do ?

EDIT : I managed to edit the text so I can remove the axis title by setting the text to null but its not enough to hide the whole axis and its values.

here's what i did to edit the text: 

serie.yAxis.axisTitle.attr({
            text: null
        });
Guian
  • 4,563
  • 4
  • 34
  • 54
  • There is no official way to simply hide an axis. I've posted a [feature request and you can vote for it here](http://highcharts.uservoice.com/forums/55896-general/suggestions/5164818-control-axis-visibility-show-hide-toggle-axes). – Dan Dascalescu Dec 10 '13 at 11:12

4 Answers4

54

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);
Paweł Fus
  • 44,795
  • 3
  • 61
  • 77
  • @Paweł: Others have posted various [other methods](http://stackoverflow.com/questions/10877927/hide-axis-and-gridlines-highcharts) to hide axes. This makes it confusing as to how to properly do that. It would be great if HighCharts implemented a [simple feature to toggle axis visibility](http://highcharts.uservoice.com/forums/55896-general/suggestions/5164818-control-axis-visibility-show-hide-toggle-axes). (Also, your answer doesn't hide the ticks - see an [example which does](http://jsfiddle.net/39xBU/55/)). – Dan Dascalescu Dec 10 '13 at 11:14
  • Isn't solution with update already easy? My example won't hide plotLines, plotBands etc. but it should be as easy as adding options which need to hidden. – Paweł Fus Dec 10 '13 at 11:42
  • 3
    That's the point, the user should not be concerned with adding options to be hidden. `Axis.visibility = false` should hide the axis completely, and `Axis.visibility = true` should show it. This would also free the developer from having to remember all the previous properties of the axis (e.g. the `title.text`) and then restoring them when showing the axis. – Dan Dascalescu Dec 10 '13 at 12:14
  • If you want to have this function built-in, vote for it in uservoice. We are trying to implement only most common and important parts. If idea on uservoice get some votes we will consider this. But still, for me it's more important to develop and prioritize new things, not something which could be easily implemented. – Paweł Fus Dec 10 '13 at 12:30
  • 1
    This is only "easily implemented" in your oversimplified example. A real world example were you have multiple axis that you need to toggle visibility, which all have different properties that need overriding can get complex. The easiest way is to save the old options somewhere, update with new options that hide all possible structures (ticks, labels, plot lines, etc.) and then set back the saved original options. Not to mention, this behaves more like adding/removing than hiding/showing. Hiding implies the space taken remains taken, but without any visible content. – Charlie Martin Nov 13 '14 at 22:51
  • 1
    Of course all of this falls secondary to the fact that this is simply the wrong way to do it. Altering a data model to temporarily toggle its visibility is a hack, not a solution. – Charlie Martin Nov 13 '14 at 23:00
  • Still feel free to vote for it in our [uservoice](http://highcharts.uservoice.com/forums/55896-general/suggestions/5164818-control-axis-visibility-show-hide-toggle-axes). Thank you for your feedback, I see your point. As a temporary solution you can use another hack (see updated answer). However, I'm not sure about your vision for hiding axis - I think it should reflect new size, just like any of series does.. – Paweł Fus Nov 14 '14 at 10:57
  • Thanks for the response. The solution you posted isn't as messy as I envisioned. I voted in user voice, but its still only at around 90 votes I believe. Probably not enough to get on your radar yet, which I understand. My vision is for hiding to behave like hiding, instead of adding/removing. The difference is the same as the difference between display:none and visibility:hidden in css. Hidden should mean the data object is still there and unaltered. The space taken on the page is still there. It's simply not visible. SVG supports the visibility property, which is what you'd want here. Thanks – Charlie Martin Nov 14 '14 at 19:12
  • Then simply override my method for hide/show and there just hide/show all SVG elements you want to. Good luck! – Paweł Fus Nov 17 '14 at 10:22
6

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

GeoffreyMahugu
  • 381
  • 1
  • 8
  • 13
  • Note you can also add: visible: false to make the entire axis invisible. I believe this is what the op and others wanted. Finally..nice and easy! – Midiman May 07 '23 at 15:14
-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'
                }
        }

},

Jagadeesh
  • 499
  • 5
  • 5
-1

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.

Tito Leiva
  • 892
  • 1
  • 12
  • 29