title: highcharts: stop chart from trapping mouse events, or capture mouse click on the ENTIRE chart
body: <p>All,</p>
  
  <p>I'm using HighCharts in a web app I'm working on, and generally, I like it very much.</p>
  
  <p>However, I'm having a hard time figuring out how capture a mouse click on the ENTIRE chart.</p>
  
  <p>In other words - I'd like to know when the user clicks ANYWHERE on the chart (e.g., the plot area, the title, the x- or y-axis, the margins and padding around the chart elements, etc.)</p>
  
  <p>Or, I'd like to disable events altogether, so I can trap the event in the container itself.</p>
  
  <p>More detailed version...</p>
  
  <p>I have a DIV that contains my HighChart.</p>
  
  <p>I want to know if the user clicks <strong><em>ANYWHERE</em></strong> within that DIV.</p>
  
  <p>So - initially I tried attaching an "onclick" event to the DIV, but that never gets fired, presumably because the click is getting trapped by the HighChart.</p>
  
  <p>So, in the code that sets up the HighChart, I added this:</p>
  
  <pre><code>var chart = new Highcharts.Chart({
      chart: {
          renderTo: "container",
          events: {
              click: function(event) {
                  // do something
              }
          },
          ...
      }
      ...
  });
  </code></pre>
  
  <p>This works OK <strong>IF</strong> the user clicks somewhere within the <strong>plot area</strong>, but not if she clicks anywhere else in the chart (e.g., the x-axis, the y-axis, the title, the padding around the chart elements, etc.)</p>
  
  <p>So - how can I make the <strong>ENTIRE</strong> chart clickable?</p>
  
  <p>Many thanks in advance!</p>