We are trying to access the values of column where user is hovering.
Initially we have used Window.event for capturing the point but after upgrading the angular and node versions, window.event is not responding as expected(as it is deprecated). Kindly let me know any alternatives to read the hovered column.
Tech stack: Angular 16(upgraded from version 8) Node 16.16
Kindly assist.
We need to read the values of hovering column of column chart.
plotOptions: {
series: {
events: {
mouseOver: ($events) => {
// I would like to capture data on which mouse is hovering
console.log($events);
}
}
}
}
First of all, you need to use:
plotOptions.series.point.events.mouseOver
instead of:
plotOptions.series.events.mouseOver
And to get the hovered point, use: event.target
plotOptions: {
series: {
point: {
events: {
mouseOver: (event) => {
console.log(event.target);
}
}
}
}
}
Or this
in basic function:
mouseOver: function (this: Highcharts.Point) {
console.log(this);
}
Live demo: https://stackblitz.com/edit/highcharts-angular-line-zha7hq?file=src%2Fapp%2Fapp.component.ts
API Reference: https://api.highcharts.com/highcharts/plotOptions.column.point.events.mouseOver