Question

I have a multi-series column chart with multiple y-axes. The y-axis is set such that only the first yAxis in the array has a gridLineWidth=1. The rest are zero.

What I’m seeing is that if I hide all the series items whose yAxis has a gridLineWidth=1, no gridlines show at all for the remainder of the series items (those that use the non-primary yAxis). This makes sense since I’ve set their gridLineWidth’s to zero…

So in an attempt to always show at least one set of gridlines, I decided to handle the hide and show events on plotOptions.column.events (I also tried legendItemClick) to first set all the gridLineWidth’s to zero, and then look for the first visible series and set the gridLineWidth on it’s yAxis object to 1, like so:

plotOptions: {
    column: {
        ...
        events: {
            show: function (event) {
                var series = this.chart.series;
                var yAxes = this.chart.yAxis;

                // first hide all the gridlines
                _.each(yAxes, function (axis) { axis.gridLineWidth = 0; });
                var firstVisibleSeries = _.find(series, function (ser) { return ser.visible == true; });
                if (firstVisibleSeries != null) {
                    firstVisibleSeries.yAxis.gridLineWidth = 1;
                }
                this.chart.redraw();
            }
        },
    ...
    },
},
...

I’m using Underscore.js for the _.each() and _.find() methods.

Using firebug, everything looks good (meaning the gridLineWidth = 1 for the first visible series item and all others are set to zero at the end of the method execution).

But no matter what I do, including the this.chart.redraw() call I stuck in at the end in desperation, it doesn’t appear to process my changes to the yAxis objects. The gridlines are still missing if I hide all series items that use the first yAxis.

Am I doing something wrong – is there some final step i’m missing to make the changes permanent, or is there a different approach I can take to achieve this goal?

Thanks for your help

EDIT:

Here’s a jsFiddle that presents the issue:
http://jsfiddle.net/kmkuntz/7NEhU/2/

Hiding both ‘money’ type series shows the gridlines disappearing.

Answer 1

Thanks to cailie on the highslide forum this is resolved.

From the post: I needed ‘.options’ after the yAxis call:

firstVisibleSeries.yAxis.options.gridLineWidth = 1;

the base jsfiddle contains the fix: http://jsfiddle.net/7NEhU/