Highlight area in highcharts - highcharts

Question

I need select area near column.
How to make the region and column stand out when you click, as when you hover over it.
This is my example:
https://jsfiddle.net/alexserden/wq6j0tnp/9/
$(function () {
let chart = Highcharts.chart('bar', {
tooltip: {
shared: true,
hideDelay:100,
useHTML: true,
outside: true,
style: {
fontSize: "13px",
color: '#505050'
}
},
credits: {
enabled: false
},
plotOptions: {
column: {
dataLabels: {
enabled: false,
style: {
fontSize: '13px',
fontWeight: 'bold',
textOutline: undefined,
color: '#505050'
}
}
},
...
},
...
}
});

Answer 1

You'll need to add an event handler for the click:
series: {
cursor: 'pointer',
marker: {
enabled: false
},
point: {
events: {
click: function () {
// Handle selection
}
},
}
}
Inside this event you'll need to handle the area selection, there is a similar post here. The selected area is a category. (API reference)
API documentation for click event: https://api.highcharts.com/highcharts/plotOptions.area.point.events.click

Answer 2

You can render the plotBands as a crosshair and use the select for highlighting the point inside the click callback.
Demo: https://jsfiddle.net/BlackLabel/k4d9nrwf/
point: {
events: {
click() {
let chart = this.series.chart;
chart.series.forEach(s => {
s.points.forEach(p => {
if(p.category === this.category) {
p.select()
}
})
})
chart.xAxis[0].update({
plotBands: [{
from: this.x -0.5,
to: this.x + 0.5,
}]
})
}
}
},
API: https://api.highcharts.com/highcharts/xAxis.plotBands
API to style the selected point: https://api.highcharts.com/highcharts/series.line.states.select