title: How do I open a new window / tab by clicking on a column / bar within a Highchart graph?
body: <p>I'm hoping someone can help my create a Highcharts Graph that, when clicking the column / bar, a new window is opened up. Very much like the HTML equivalent of:</p>
  
  <pre><code>&lt;a target="_blank"&gt;test&lt;/a&gt;
  </code></pre>
  
  <p>I have managed to do this without creating a new window and I was hoping that someone might be able to tell me what I need to adjust to cater for a new window popup?</p>
  
  <p>I have an example at <a href="https://jsfiddle.net/richiehandandshrimp/0pkxosud/" rel="nofollow">jsfiddle</a></p>
  
  <p>Which is Basically the following code:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$(function () {
  
      $('#container').highcharts({
          chart: {
              type: 'column'
          },
          title: {
              text: 'Title'
          },
          credits: {
              enabled: false
          },
          xAxis: {
              categories: ["category_1", "category_2", "category_3", "category_4"],
              crosshair: true
          },
          yAxis: {
              min: 0,
              title: {
                  text: 'Count'
              }
          },
          tooltip: {
              headerFormat: '&lt;span style="font-size:10px"&gt;{point.key}&lt;/span&gt;&lt;table&gt;',
              pointFormat: '&lt;tr&gt;&lt;td style="color:{series.color};padding:0"&gt;{series.name}: &lt;/td&gt;' +
                      '&lt;td style="padding:0"&gt;&lt;b&gt;{point.y:.1f}&lt;/b&gt;&lt;/td&gt;&lt;/tr&gt;',
              footerFormat: '&lt;/table&gt;',
              shared: true,
              useHTML: true
          },
          legend: {
              labelFormatter: function () {
                  var total = 0;
                  for (var i = this.yData.length; i--; ) {
                      total += this.yData[i];
                  }
                  ;
                  return 'Total: ' + total;
              },
              align: 'right',
              verticalAlign: 'top',
              x: -40,
              y: 60,
              floating: true
          },
          plotOptions: {column: {pointPadding: 0.2, borderWidth: 0, dataLabels: {enabled: true}}, },
          series: [{
              name: 'Live Trial Lead Sources',
              data: [{"y":111,"url":"http:\/\/www.google.ie"},{"y":44,"url":"http:\/\/www.google.ie"},{"y":22,"url":"http:\/\/www.google.ie"},{"y":10,"url":"http:\/\/www.google.ie"}],
              cursor: 'pointer',
              point: {
                  events: {
                      click: function () {
                          location.href = this.options.url;
                      }
                  }
              }
          }]
      });
  
  });</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://code.highcharts.com/modules/exporting.js"&gt;&lt;/script&gt;
  &lt;script src="https://code.highcharts.com/highcharts.js"&gt;&lt;/script&gt;
  
  &lt;div id="container" style="min-width: 400px; height: 400px; margin: 0 auto"&gt;&lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>I thought it might be something like the following which is wrong:</p>
  
  <pre><code>[{"y":111,"url":"http:\/\/www.google.ie","target"=&gt;"_blank"} ...
  </code></pre>
  
  <p>Thanks in advance.</p>