How do I get the value of a highcharts graph point on mouseover?

Question

I am creating a highcharts chart series using the following logic:

this.series = [];

for(var i in headerData) {
    var header = headerData[i];

    this.series.push({
        name: header.name,
        data:[],
        yAxis:parseInt(header.axis),
        id: header.id,
        type: 'column',
        zIndex: 1,
        events: {
            mouseOver: function (e) {
                console.log('Point: ', e.point);
            }
        }
    });
}

I read that the point is a property of the event e, but in my case e.point is undefined. I also cannot find anything in e related to the moused-over point.

Does anybody know how to get the x- and y-values of the point that has been moused over?

Answer 1

You need to set the event on the plotOptions property. Here's an example taken from the Highcharts API documentation:

$(function () {
    var $reporting = $('#reporting');

    $('#container').highcharts({

        title: {
            text: 'Mouse events demo'
        },
        subtitle: {
            text: 'On point mouse over or mouse out, the values should be reported in top left'
        },
        plotOptions: {
            series: {
                point: {
                    events: {
                        mouseOver: function () {
                            var chart = this.series.chart;
                            if (!chart.lbl) {
                                chart.lbl = chart.renderer.label('')
                                    .attr({
                                        padding: 10,
                                        r: 10,
                                        fill: Highcharts.getOptions().colors[1]
                                    })
                                    .css({
                                        color: '#FFFFFF'
                                    })
                                    .add();
                            }
                            chart.lbl
                                .show()
                                .attr({ 
                                    text: 'x: ' + this.x + ', y: ' + this.y 
                                });
                        }
                    }
                },
                events: {
                    mouseOut: function () {
                        if (this.chart.lbl) {
                            this.chart.lbl.hide();
                        }
                    }
                }
            }
        },

        tooltip: {
            enabled: false
        },

        series: [{
            data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
        }]
    });
});

Demo

Answer 2

You can also use chart.hoverPoint if trying to find out the currently moused over point from outside the mouseOver event. However this is not on the documentation, which likely means it can change in the future.