The function responsible for triggering these events is referred to as onContainerClick. It triggers both the series event followed by the point event. Here is an outline of how it works:
onContainerClick: function(e) {
var chart = this.chart,
hoverPoint = chart.hoverPoint,
plotLeft = chart.plotLeft,
plotTop = chart.plotTop;
e = this.normalize(e);
if (!chart.cancelClick) {
// On tracker click, trigger the series and point events. #783, #1583
if (hoverPoint && this.inClass(e.target, 'highcharts-tracker')) {
// the series click event
fireEvent(hoverPoint.series, 'click', extend(e, {
point: hoverPoint
}));
// the point click event
if (chart.hoverPoint) {
hoverPoint.firePointEvent('click', e);
}
} else {
extend(e, this.getCoordinates(e));
// fire a click event in the chart
if (chart.isInsidePlot(e.chartX - plotLeft, e.chartY - plotTop)) {
fireEvent(chart, 'click', e);
}
}
}
},
This code serves as a wrapper for the onContainerClick method, designed to only trigger one event at a time:
(function(H) {
var occ = H.Pointer.prototype.onContainerClick;
H.Pointer.prototype.onContainerClick = function(e) {
if(e.target.classList.value.indexOf('highcharts-point') >= 0) {
e = this.normalize(e);
this.chart.hoverPoint.firePointEvent('click', e);
}
else if (e.target.classList.value.indexOf('highcharts-tracker') >= 0) {
e = this.normalize(e);
H.fireEvent(this.chart.hoverPoint.series, 'click',H.extend(e, {
point: this.chart.hoverPoint
}));
}
else {
occ.call(this, e);
}
}
})(Highcharts)
See the functionality in action:
(function(H){
var occ = H.Pointer.prototype.onContainerClick;
H.Pointer.prototype.onContainerClick = function(e) {
if(e.target.classList.value.indexOf('highcharts-point') >= 0) {
e = this.normalize(e);
this.chart.hoverPoint.firePointEvent('click', e);
}
else if (e.target.classList.value.indexOf('highcharts-tracker') >= 0) {
e = this.normalize(e);
H.fireEvent(this.chart.hoverPoint.series, 'click',H.extend(e, {
point: this.chart.hoverPoint
}));
}
else {
occ.call(this, e);
}
}
})(Highcharts)
Highcharts.chart('container', {
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
plotOptions: {
series: {
cursor: 'pointer',
events: {
click: function (event) {
console.log('series event')
}
},
point: {
events: {
click: function(event) {
console.log('point event')
}
}
}
}
},
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]
}]
});
<script src="https://code.highcharts.com/highcharts.src.js"></script>
<div id="container" style="height: 400px"></div>