How to make xAxis clickable?

[Alec Bennett]

I'm trying to make the X-Axis labels of my chart clickable so the user can get more info about that time period.

Here's how I'm defining my XAxis:

 xaxis:
 {
   mode: "time",
   tickFormatter:timeTickFormatter,
   tickSize: [4, "hour"],
   twelveHourClock: true,
   timezone: "browser" // switch to using local time on plot
 },

And here's my timeTickFormatter function:

function timeTickFormatter(val,axis) {
  output = "<div onclick='alert(\"test\");'>"+val+"</div>";
  return output;
}

Everything works, except that the XAxis labels still aren't clickable. 

Am I correct in thinking this is because they're being drawn on a canvas?

If so, any tips on the best and simplest way to make them clickable?

Or is there a way to make them drawn in regular HTML?

Thanks for any help.