How to add gridlines to an already generated chart in highcharts?

Question

I have a bubble chart which is already generated. I need to add/remove gridlines on the same chart based on a checkbox which user can select.

I tried something like the following but it didn't work.

setTimeout(function () {
    var chart = $('#bubble-chart-container').highcharts();
    chart.options.xAxis[0].gridLineWidth = 1;
    chart.options.yAxis[0].gridLineWidth = 1;
    chart.reflow();
}, 500);

Answer 1

You will need to use the chart.update ( API link ) method like this:

HTML

<div id="container"></div>
<button id="addButton">Add lines</button>
<button id="removeButton">Remove lines</button>

Javascript

var chart = Highcharts.chart('container', {
  ...
});


$('#addButton').click(function() {
  chart.update({
    xAxis:{
        gridLineWidth: 1
    },
    yAxis:{
        gridLineWidth: 1
    }
  });
});

$('#removeButton').click(function() {
  chart.update({
    xAxis:{
        gridLineWidth: 0
    },
    yAxis:{
        gridLineWidth: 0
    }
  });
});

Fiddle