Javascript Highcharts v3.0.5 - How to hide Y Axis

Question

When using Highcharts (v.3.0.5), I have multiple Y Axis displayed in the same chart. Using the legend, a user can choose to hide or show any of the Y Axis as they want. All this is built in feature of the Highcharts javascript library. However, when a Y Axis is hidden, its Title still appears visible in the Chart. I would like to hide it when the rest of the Y Axis is hidden. Surprised this is not the default behaviour already. Does anyone know how to do that?

The behaviour can be seen by looking at the example provided on Highcharts examples page:

http://www.highcharts.com/demo/combo-multi-axes

If you hide the "rainfall" axis for example, the title remains in the chart as "Rainfall".

I found this post (several years old) where the exact same question was asked. However, the solution proposed does not work. The show and hide events, redisplay everything.

http://forum.highcharts.com/highcharts-usage/how-to-hide-y-axis-title-multiple-axis-t6973/#p32842

Answer 1

This actually turns out to be a much sought after question/answer. Since Highcharts V2.2, it is possible to assign "showEmpty: false" to y axis definitions and this will ensure that when hidden, the Y-axis text label is also hidden. Example snippet of config below:

                 yAxis: [{
                min: 0,
                showEmpty: false,
                labels: {
                    formatter: function() {
                        return this.value;
                    },
                    style: {
                        color: '#3366CC'
                    }
                },
                title: {
                    text: 'Clicks',
                    style: {
                        color: '#3366CC'
                    }
                },
                id: 'Clicks'
            }, 
                 ...

I have read reports where this showEnabled = false breaks if both min and max are also set. In the case above, where only min is set, it worked well for me using Highcharts V3.0.5

Answer 2

@arcseldon, it is true that showEnabled = false breaks if both min and max are also set. A possible workaround in this case is to set floor and max instead

Answer 3

you can use yAxis.setTitle() and set/remove the title when needed.

here is the api documentation link