How to get the point value of a chart with a high graph when you hover over the mouse?

Question

I am creating a series of tall diagram charts 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 this point is a property of the e event, but in my case e.point is undefined . I also cannot find anything in e related to the moused-over point.

Does anyone know how to get the x- and y-values ​​of the point that was processed?

Answer 1

You need to set event in the plotOptions property. Here is 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