title: Highcharts - Turning on and off gridlines on show, hide, or legendItemClick
body: <p>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.  </p>
  
  <p>What I'm seeing is that if I hide all the series items whose yAxis has a <a href="http://www.highcharts.com/ref/#yAxis--gridLineWidth" rel="nofollow">gridLineWidth</a>=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...  </p>
  
  <p>So in an attempt to always show at least one set of gridlines, I decided to handle the <a href="http://www.highcharts.com/ref/#plotOptions-series-events--hide" rel="nofollow">hide</a> and <a href="http://www.highcharts.com/ref/#plotOptions-series-events--show" rel="nofollow">show</a> events on plotOptions.column.events (I also tried <a href="http://www.highcharts.com/ref/#plotOptions-series-events--legendItemClick" rel="nofollow">legendItemClick</a>) 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:</p>
  
  <pre><code>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();
              }
          },
      ...
      },
  },
  ...
  </code></pre>
  
  <p>I'm using Underscore.js for the _.each() and _.find() methods.  </p>
  
  <p>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).  </p>
  
  <p>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.</p>
  
  <p>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?</p>
  
  <p>Thanks for your help</p>
  
  <p><strong>EDIT:</strong></p>
  
  <p>Here's a jsFiddle that presents the issue:
  <a href="http://jsfiddle.net/kmkuntz/7NEhU/2/" rel="nofollow">http://jsfiddle.net/kmkuntz/7NEhU/2/</a></p>
  
  <p>Hiding both 'money' type series shows the gridlines disappearing.</p>