High chart on click event listening - highcharts

Question

I am creating my high chart object from a json_encoded array passed in from a data id on the containing div.
$('div.filter_pie_chart').each(function( index ) {
$(this).highcharts($(this).data("params"));
});
I would like to listen for click events of a pie chart using the following notation. Is this possible?
$(document).on('click','.high_chart_point_object', function (event) {
return false;
});

Answer 1

I think this documentation link is what you need.
Here is a JsFiddle.
$(function () {
// create the chart
var mychart = $('#container').highcharts({
chart: {
events: {
click: function(event) {
alert ('x: '+ event.xAxis[0].value +', y: '+
event.yAxis[0].value);
}
}
},
xAxis: {
},
series: [{
data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
}]
});
});
And I think these lines should work too (not tested, but it is similar to your notation) :
$('.high_chart_point_object').highcharts({
chart: {
events: {
click: function(event) {
return false;
}
}
}
});
If you want to change options dynamically, here is the solution :
var options = mychart.options;
options.chart.events.click = function () {alert('do what you want')};
mychart = new Highcharts.Chart(options);
Here is another JsFiddle.

Answer 2

Yes, this should possible in three ways:
one is to use plotOpttions.pie.point.events.click ant there call function you need to. Reference.
another one is to Element.on() function from Highcharts after digging for DOM elements - it's the same as using $().on(), reference.
if you really need that $().on(), you can use is on point.element, sample for you: http://jsfiddle.net/UWZAe/
And code for third case:
chart: {
events: {
load: function() {
var chart = this,
pie = chart.series[0],
pieData = pie.data,
dLen = pieData.length;
for(var i = 0; i < dLen; i++){
var slice = pieData[i];
console.log(slice, $(slice.graphic));
}
}
}
}