Emitting Event from Point Mouseover

[Rothalack]

I am trying to emit an event from the mouseover of a charts point/series. I would like to synchronize multiple charts in different Vuejs components using that information. Currently, I'm not able to cross this "this" ambiguity in terms of passing data out of the Highcharts event into the Vuejs scope.

series: {
    point: {
        events: {
            mouseOver: function(thisevent) {
                var chart,
                    currentPoint,
                    event,
                    i;
                for (i = 0; i < Highcharts.charts.length; i = i + 1) {
                    chart = Highcharts.charts[i];
                    if(i === thisevent.target.series.chart.index){
                        if (chart) {
                            event = chart.pointer.normalize(thisevent);
                            if (chart.series[0]) {
                                currentPoint = chart.series[0].searchPoint(event, true);
                                if (currentPoint) {
                                    this.hoverX = currentPoint.x; // <-------- HOW TO MAKE THIS AVAILABLE IN VUE AND/OR EMIT A BUS EVENT
                                }
                            }
                        }
                    }
                }
            }
        }
    },

I'm trying to access currentPoint.x in Vuejs. How do I do this?

I know the above has a few other quirks, but the primary question is: how to hook into events in Highcharts and emit data from that into the Vuejs bus. Right now I can't get things in the proper scope to accomplish this.

[Denyllon]

Hi @Rothalack ,

Thank you for contacting us, and apologize for a bit of late in reply. Your implementation doesn't work, because this inside of mouseOver function is no longer pointing on the Vue component instance, but on the Point object on which the function was called. You need to assign your Vue component instance to some variable (e.g self or less popular that), and then refer to it within your event function, instead of direct reference to this context. The best approach in this case would be to apply some kind of Event Bus on your app, so that it would be able to manage global events. I prepared the example which shows this way out of the problem, so please take a look on it.

Live example: https://codesandbox.io/s/y3zy43mznv Vue API: https://vuejs.org/v2/api/#vm-emit https://vuejs.org/v2/api/#vm-on

Helpful article: https://alligator.io/vuejs/global-event-bus/

Kind regards!