Hi,
I think there's a bug in your suggestion, as the onClick function has two parameters of e and items, but the mod to chartjs.js only passes in e. I changed it to onClick(e, items) so solve this.
Is there a way I can define this change so that a future version of KoolReport won't remove this change? Will Koolreport add in support for the onClick event as defined in ChartJS itself - it appears to have the event and activeElements as the parameters, so would this be e and items as I've already done?
However, this doesn't give access to the labels, so I've also had to add the chart variable, so it's now onClick(e, items, this.chart) as otherwise I can't see any way to determine which chart has triggered the onClick call. Is there a way to get the chart reference in the function call without resorting to the modification I've made? In the debugger I can't see any simple way to access the current chart object from the function itself.
I was hoping that chart.getElementAtEvent(e) would help with figuring out the label that was clicked, but this always returns a empty array.
What I've come up with is the following, which seems to work for me (I'm using right aligned labels on a horizontal chart, hence the way the calculations are done). It assumes that the labels are all the same height, which they are in my case. The links are a PHP array of URLs, which are then encoded into a variable inside the function - each chart gets it's own copy of the function with it's own links array as this is generated from an included PHP script for each chart on the page.
$settings["options"]["onClick"] = "function(e, items, chart) {
var links = ".json_encode($textlink).";
var lx = e.offsetX;
var ly = e.offsetY;
let index = -1;
var height = chart.scales['y-axis-0']._labelSizes.first.height;
var width = chart.scales['y-axis-0'].width;
for (let i = 0; i < chart.scales['y-axis-0']._labelItems.length; i++) {
const {
x,
y
} = chart.scales['y-axis-0']._labelItems[i];
if (lx >= x - width && lx <= x && ly >= y - height/2 && ly <= y + height/2 ) {
index = i;
break;
}
}
if (index !== -1)
if (links[index])
window.open(links[index], '_self');
return false;
}";