CODEWITHSUNDEEP
javascripthighcharts
idrinkpabst
idrinkpabst

Reputation: 1838

Highcharts - Draw Crosshairs / Tooltip on Mouse Position Instead of Snapping to Data Point

Here (see this jsfiddle) you can see the 2-dimensional crosshairs are snapping to the datapoint that is closest to it. How would you make the crosshairs and tooltip correspond to the current mouse position on the chart?

tooltip: {
  crosshairs: [true, true]
}

Upvotes: 6

Views: 7573

Answers (3)

Serg Ivchenko
Serg Ivchenko

Reputation: 21

You can try it Set axis crosshair for mouse move

Example

$('#container').highcharts({
    xAxis: {
        crosshair: {
            snap: false
        }
    },
    yAxis: {
        crosshair: {
            snap: false
        }
    },
    series: [{
        data: [6, 4, 2,4],
        name: 'First'
    }, {
        data: [7, 3, 2],
        name: 'Second'
    }, {
        data: [9, 4, 8],
        name: 'asdf'
    }]        
});

Upvotes: 2

ctb3
ctb3

Reputation: 396

jsFiddle Solution

I ended up binding my own mousemove event to get the constantly changing mouse position within the graph for the crosshairs. For the tooltip i just used:

tooltip: {
            shared: true,
            followPointer: true
        },

This should be more than enough to get you going.

Upvotes: 10

Sebastian Bochan
Sebastian Bochan

Reputation: 37578

Unfortunately crosshair works only in this way, but you can prepare your own solution by mouseOver and mouseOut events and add draw line by renderer.

http://api.highcharts.com/highcharts#plotOptions.series.events.mouseOver http://api.highcharts.com/highcharts#plotOptions.series.events.mouseOut

http://api.highcharts.com/highcharts#Renderer

Upvotes: 2

Related Questions