Plotline events no longer bind this to plotline

[charmbv]

Expected behaviour

I'm using the following code to handle the mouseover and mouseout events on a plotline to display a tooltip:

chart.yAxis[0].addPlotLine({
  ...,
  events: {
    mouseover: function (event: any) {
      console.log(this);
      return MyComponent.prototype.showTargetPlotLineTooltip(this, event);
    },
    mouseout: function (event: any) {
      console.log(this);
      return MyComponent.prototype.hideTargetPlotLineTooltip(this, event);
    },
  },
});

When hovering over the plotline the tooltip should appear and disappear again when moving away from the plotline. Also, the console should show a PlotlineOrBand object.

Actual behaviour

The console shows the target element of the event and the show/hide functions fail that series is not a member of undefined for the line:

const series: Highcharts.Series = plotLine.axis.series[0];

When I donwgrade Highcharts to v11.1.0 the problem disappears.

Product version

Highcharts v11.2.0, Highcharts-Angular v4.0.0

Affected browser(s)

Firefox, Chrome, Edge.

[karolkolodziej]

Hi @charmbv!

I'm testing it with the latest version and I can use the mouseover event- demo.
Could you please explain where the issue is?
Do you mean the context of this has changed- but it was between 11.2.0 and 11.3.0?

[charmbv]

Problem is not with the event but with the value of this. With 11.1.0 I get a PlotlineOrBand object but with 11.2.0 I get a HTML element.

[karolkolodziej]

Oh, I see now but I think the change was made between v11.2.0 and v11.3.0- bisected to: a3ea688

Code responsible for it:

            objectEach(events, (event, eventType): void => {
                svgElem?.on(
                    eventType,
                    function (this: SVGElement, e: any): void {
                        events[eventType].apply(this, [e]);
                    }
                );
            });

Looks like an intended change, any comments @TorsteinHonsi ?

[charmbv]

I don't know if it is intended but the same construct works properly of events on other elements, e.g. axis labels. Also, according to the documentation this refers to the object that emitted the event, not the element.

[karolkolodziej]

Speaking of, I'm not able to reach the Interface reference for the event callbacks in the API.