How do I access halo on column click event? - highcharts

Question

How do I access the halo on click event? In my current code, I can only create an on click event to the actual column (point). I want the user to be able to click anywhere in the shaded area, rather than on the actual column.
My code below:
<Chart
chart={{
type: 'column',
backgroundColor: {
linearGradient: { x1: 0, y1: 0, x2: 1, y2: 1 },
stops: [
[0, '#2a2a2b'],
[1, '#3e3e40']
]
},
plotBorderColor: '#606063'
}}
title={{
text: 'Quailty Score',
style: {
color: '#E0E0E3',
fontSize: '20px'
}
}}
xAxis={[{
categories: qualityScore.accountQualityScore.graphData.qualityScore,
crosshair: true,
gridLineColor: '#707073',
labels: {
style: {
color: '#E0E0E3'
}
},
lineColor: '#707073',
minorGridLineColor: '#505053',
tickColor: '#707073',
title: {
style: {
color: '#A0A0A3'
}
}
}]}
yAxis={[{
min: 0,
gridLineColor: '#707073',
labels: {
style: {
color: '#E0E0E3'
}
},
lineColor: '#707073',
minorGridLineColor: '#505053',
tickColor: '#707073',
title: {
text: 'Ad Groups',
style: {
color: '#A0A0A3'
}
}
}]}
tooltip={{
headerFormat: '<table>',
pointFormat: '<tr><td style="color:{series.color};padding:0"> {series.name}: </td>' +
'<td style="padding:0"><b>{point.y:.1f}</b></td></tr>',
footerFormat: '</table>',
shared: true,
useHTML: true,
backgroundColor: 'rgba(0, 0, 0, 0.85)',
style: {
color: '#F0F0F0'
}
}}
plotOptions={{
column: {
pointPadding: 0.1,
borderWidth: 0,
point: {
events: {
click: (e) => {
console.log(`value: ${e.point.y}`);
}
}
}
},
series: {
dataLabels: {
color: '#B0B0B3'
},
marker: {
lineColor: '#333'
}
},
boxplot: {
fillColor: '#505053'
},
candlestick: {
lineColor: 'white'
},
errorbar: {
color: 'white'
}
}}
series={[{
name: 'Ad Groups',
data: qualityScore.accountQualityScore.graphData.count
}]}
legend={{
itemStyle: {
color: '#E0E0E3'
},
itemHoverStyle: {
color: '#FFF'
},
itemHiddenStyle: {
color: '#606063'
}
}}
loading={qualityScore.accountQualityScore.loading}
/>

Answer 1

I'm sure this is another one that has multiple answers.
I approached by using the chart click event, like this:
chart: {
events: {
click: function(e) {
var xVal = Math.round(e.xAxis[0].value),
yVal = this.series[0].data[xVal].y;
console.log('x: ', xVal, 'y: ', yVal);
}
}
}
Which works great for when the user clicks off of the point, but when they click on the point, the point click event overrides the chart click event.
So I had to capture the point click event as well:
plotOptions: {
series: {
events: {
click: function(e) {
var xVal = e.point.x,
yVal = e.point.y;
console.log('x: ', xVal, 'y: ', yVal);
}
}
}
}
Using both of these click events together, you can capture the same information whether the user clicks on the point, or on the crosshair area above the point.
Example:
http://jsfiddle.net/jlbriggs/xufekLpv/