How do I make an API call from clicking on a bar element in Highcharts? - highcharts

Question

I need to make an API call when clicking on a bar element. For example, look at this jsfiddle.
https://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/highcharts/plotoptions/series-point-events-click-column/
See how the x axis has the 12 months? Let's say that when clicking on the bar for "April," I want to make an API call in order to get sales data for the month of April and display that on the graph. I can't find a way to do this, because this click function...
plotOptions: {
series: {
events: {
click: function (event) {
//code goes here
}
}
}
}
... can only access items inside of the chart. I need to make an outside call to the database when clicking on a bar. Anything I can do? Thanks.
I tried this
document.querySelector('.rect.highcharts-point').addEventListener('click', e => {
//code goes here
});
It didn't work at all which is confusing, because this method clearly works when referencing the chart as whole, but doesn't work for just a bar element as you can see it working for the entire chart in this jsfiddle.
https://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/highcharts/chart/events-container/

Answer 1

Three ways how you can achieve that:
From the callback to the built-in point click() event:
plotOptions: {
series: {
point: {
events: {
click() {
let point = this;
getPoint(point)
}
}
}
}
},
.
function getPoint(p) {
console.log('From the callback: ', p)
}
From the div container:
document.querySelector('.chart-container').addEventListener('click', e => {
if (e.point != undefined) {
console.log('From the container: ', e.point)
}
});
Looping through the rects:
function getPointLoop(p) {
p.addEventListener('click', e => {
console.log('From the loop:', e.target.point)
})
}
let points = Array.from(document.querySelectorAll('rect.highcharts-point'))
for (i = 0; i < points.length; i++) {
getPointLoop(points[i])
}
Demo:
https://jsfiddle.net/BlackLabel/9bos6eu8/