highcharts clickable labels how to goto anchor

Question

I'm using Highcharts within my Backbone application to display some information in a column graph.

I use the datalabels in the chart to allow the user to click on and move to the detail page of that datapoint. This is not a normal window.location call, but should be a window.location.hash call. This is because I want to move to an anchor, which will be picked up by my Backbone router.

This is what a typical label (using the formatter) is transformed into:

<tspan onclick="location.href=&quot;/#/test/1&quot;" style="cursor: pointer; " x="360">Sectie nummer 6</tspan>

So in other words, is it possible to have Highcharts do a onclick="window.location.hash=..." instead of location.href?

Thanks in advance!

Answer 1

window.location.hash="comment-16513878" & window.location="#comment-16513878" appear to have the same result. Have you tried that?

formatter: function() {
    return '<a href="#somePlaceHolder" >' + this.y + '</a>';
}

http://jsfiddle.net/jugal/BUxMZ/

Answer 2

An alternative solution (not the most cross-browser solution because of its dependency on <text> but you can get it working with the incompatible IE versions)

$(".highcharts-data-labels").on("click", "text", function() {
    window.location.hash = "anchor";
});

Why jQuery.on()?

jsFiddle Demo