The documentation for this mouse over event describes exactly what I'm trying to do in High Charts - fire an event "when the mouse enters the graph". However, if you look at the fiddle examples given in the documentation, the even only fires when you hover over a specific point rather than over the graph in general. This seems like needing to fire events on general graph mouse-overs would be a pretty general use case for a charting library, but I can't seem to get this behavior using any of the different events available. I also can't use jQuery hover because I need the related x label that corresponds to the mouse position. Does anyone know how I can fire events on this behavior?

For what it's worth, this is identical to the question asked on the high charts forum here, which is left unanswered

The documentation for this mouse over event describes exactly what I'm trying to do in High Charts - fire an event "when the mouse enters the graph". However, if you look at the fiddle examples given in the documentation, the even only fires when you hover over a specific point rather than over the graph in general. This seems like needing to fire events on general graph mouse-overs would be a pretty general use case for a charting library, but I can't seem to get this behavior using any of the different events available. I also can't use jQuery hover because I need the related x label that corresponds to the mouse position. Does anyone know how I can fire events on this behavior?

For what it's worth, this is identical to the question asked on the high charts forum here, which is left unanswered

• javascript
• charts
• highcharts

• 1 Do you want a specific HighCharts element to fire when you enter the graph or a more generic mand to execute? If the latter, then you just need a totally separate javascript function that responds to the onmouseover event for the highcharts object itself. See w3schools for onmouseover example – StephenH Commented Feb 18, 2014 at 20:59
• @StephenH unfortunately yes. On hover I am updating other, related graphs based on the x value being hovered over. – carc Commented Feb 18, 2014 at 21:57
• So just to be clear, you do have values of x that you want to correspond to events? For instance, if I'm hovered over a datapoint where x=3, that will cause an event to occur. If I'm hovered over datapoint x=4, that will cause a different event? – StephenH Commented Feb 18, 2014 at 22:06
• 2 Have you looked at the example for mouseover with sticky tracking? This looks like it would be more helpful for you. The only thing is you have to mouseover the series first. – Blundering Philosopher Commented Feb 19, 2014 at 1:52
• 2 See custom event plugin highcharts./plugin-registry/single/15/Custom-Events – Sebastian Bochan Commented Feb 19, 2014 at 10:43

2 Answers 2

I'm not sure I understand pletely but I think you want to able to hover anywhere in the plot and determine the x,y coordinate of your hover?

If that is so, you can do this outside of Highcharts event handling:

$('#container').mousemove(function(e){ //mouseover on container div   
    var chart = Highcharts.charts[0];
    var xaxis = chart.xAxis[0];
    var yaxis = chart.yAxis[0];
    xaxis.removePlotLine('plot-line-x');
    yaxis.removePlotLine('plot-line-y');
    var x = xaxis.toValue(e.offsetX, false); // find X coor where mouse is
    var y = yaxis.toValue(e.offsetY, false); // find y coor where mouse is
    xaxis.addPlotLine({
        value: x,
        color: 'red',
        width: 2,
        id: 'plot-line-x'
    });
    yaxis.addPlotLine({
        value: y,
        color: 'red',
        width: 2,
        id: 'plot-line-y'
    });
});

Demo here.

If I am understanding your question right, you can use this example to help you out. It essentially shows the currently hovered data in the highcharts element interacting with items outside of the chart. I've made a slight modification to the example to demonstrate how to essentially 'export' the highcharts data to a regular Javascript function where you can then call other functions and change certain global variables to affect your other elements.

I added the following function...

function doSomething(x)
{
    alert(x);
}

And changed the following code...

mouseOver: function() {
    $reporting.html('x: '+ this.x +', y: '+ this.y);
}

To this...

mouseOver: function() {
    doSomething(this.x);
    //$reporting.html('x: '+ this.x +', y: '+ this.y);
}

You can find my modified example here and here is the api reference for the data points. You might also find the 'select' event helpful for your application. Here is another example that uses 'select'. The only difference besides changing the event function is adding the property allowPointSelect: true,