title: How to hide Axes Crosshairs by onclick event in Highcharts
body: <p>I Would like to do the Axes Cross hairs with onclick event. Initially the cross hairs are enables. When clicking a toggle tooltip button, we have to hide the Cross hairs.</p>
  
  <p>Here my code</p>
  
  <h1>Here the Button where the onclick event gonna to happen</h1>
  
  <pre><code>&lt;a href="#" id="toggle_tooltip"&gt;&lt;i class="fa fa-crosshairs center-in-block" aria-hidden="true"&gt;&lt;/i&gt;&lt;/a&gt;
  </code></pre>
  
  <h2>Highcharts initialization at the Axes</h2>
  
  <p>[Note that, here we are not using the tooltip]</p>
  
  <pre><code>$(function() {
      $(document).ready(function() {
  xAxis: {
                  type: 'datetime',
                  crosshair: {
                   color: '#335A81',
                      label: {
                          enabled: true,
                          padding: 8,
                      }
                  },
                },
  yAxis: {
  
                  opposite: true,
                  crosshair: {
                      label: {
                          enabled: true,
                          format: '{value:.2f}'
                      }
                  },
  )};
  )};
  </code></pre>
  
  <h1>Here the onclick event function</h1>
  
  <pre><code>$('#toggle_tooltip').click(function(){
    var chart = $("#tv_chart_container").highcharts();
    var x_tool = chart.xAxis[0].crosshair.label.enabled;
    var y_tool = chart.yAxis[0].crosshair.label.enabled
    if(x_tool == true &amp;&amp; y_tool == true)
    {
        chart.xAxis[0].crosshair.update({
          enabled: false,
         });
        chart.yAxis[0].crosshair.update({
          enabled: false
          });
    }
    else
    {
      chart.xAxis[0].update({
        crosshair: {
          dashStyle: 'solid',
          color: '#248EC6',
          label:{
            enabled:true,
            padding:8,
          }
        }
        });
      chart.yAxis[0].update({
        crosshair: {
          dashStyle: 'solid',
          color: '#248EC6',
            label:{
              enabled:true,
              padding:8,
            }
          }
        });
    }
  });
  </code></pre>