CODEWITHSUNDEEP
javascriptchartshighcharts
carc
carc

Reputation: 63

High Charts - mouse over event on any part of graph

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

Upvotes: 3

Views: 6306

Answers (2)

Mark
Mark

Reputation: 108522

I'm not sure I understand completely 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.

Upvotes: 4

StephenH
StephenH

Reputation: 1126

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,

Upvotes: 1

Related Questions