Turning on and off gridlines on legendItemClick

[kmkuntz]

Hi guys,

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 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 one, like so:

Code: Select all

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, or is there an approach I can take to achieve this goal?

Thanks for your help
Kevin

[cailie]

Hi Kevin,

We're doing basically the same thing...

You need to set the 'isDirty' flag on the axis before redrawing the chart.

Code: Select all

firstVisibleSeries.yAxis.gridLineWidth = 1;
firstVisibleSeries.yAxis.isDirty = true;
this.chart.redraw();

Cheers,
-C

[kmkuntz]

Thanks cailie for the response.

Thought that would do the trick, but still no luck.

I created a fiddle for it, which is a pretty accurate representation of what i'm doing in production:

http://jsfiddle.net/kmkuntz/7NEhU/2/

(in the fiddle i've got the hide() show() and legendItemClick() handlers in place just represent each attempt i've made)

Many thanks for the advice.

Kevin

[cailie]

Oops! Sorry I missed this... it's actually

Code: Select all

firstVisibleSeries.yAxis.options.gridLineWidth = 1;

Your example works now:
http://jsfiddle.net/7NEhU/5/

Cheers,
-C

[kmkuntz]

Yep. that did it. Thank you very much.