Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Javascript Highcharts v3.0.5 - How to hide Y Axis Title when using multiple Y Axis

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

like image 941
arcseldon Avatar asked Nov 24 '13 22:11

arcseldon


2 Answers

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

like image 166
arcseldon Avatar answered Oct 18 '22 23:10

arcseldon


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

here is the api documentation link

like image 1
Strikers Avatar answered Oct 18 '22 22:10

Strikers