Highcharts - mouseover event over column

Question

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);
        }
    }
}

}

Answer 1

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