Crosshair intersect value on series

[triforce]

I am using a Highcharts chart with a tooltips.crosshairs on the x value (crosshairs: true) - Is it possible to get the x (or y) value of where the crosshair line intersects on a series?

Similar to this http://jsfiddle.net/6me6j77z/ apart from the x and y values in the tooltip are where the crosshair intersects the line.

If this is not currently possible could it be considered as a future option for crosshairs?

[pawelfus]

Hmm.. something like this: http://jsfiddle.net/r7fdh/90/ ?

Taken from old question on the stackoverflow: http://stackoverflow.com/questions/19832091/highcharts-crosshair-with-labels-on-axes

Note: Basic demo with crosshairs: http://jsfiddle.net/wn026zaa/

[triforce]

Thanks for the quick response. Sort of like the first example however I need the x and y where the vertical line intersects the series (not where the mouse pointer is).

[TorsteinHonsi]

@pawelfus The crosshair label is available through the Highstock API: http://jsfiddle.net/gh/get/jquery/1.7.2/highslide-software/highcharts.com/tree/master/samples/stock/xaxis/crosshair-label/. This was not documented until today.

[TorsteinHonsi]

@triforce What you are looking for I think can be expressed as a snap:false feature on the xAxis crosshair, which is possible today, and and interpolate feature on the yAxis, which is currently not implemented.

[TorsteinHonsi]

I wrote a drop-in snippet for interpolation, what do you think?

http://jsfiddle.net/highcharts/uj0dnwmt/

[triforce]

Perfect thank you! Is there a quick way to turn it off and on? Will this be available in vanilla Highcharts at some point?

[karmir]

If not mistake, there was plugin for this ?

[TorsteinHonsi]

@trlforce: You control it via configuration. Basically, the xAxis has a snap crosshair, and the Y axis interpolate:

        xAxis: {
            crosshair: {
                snap: false
            }
        },

        yAxis: {
            crosshair: {
                interpolate: true,
                label: {
                    enabled: true,
                    format: '{value:.1f}' // One decimal
                }
            }
        },

Will this be available in vanilla Highcharts at some point?

Maybe, but it adds some weight so we are a bit restrictive. Perhaps we can combine the interpolation logic with other interpolation code and then save some filesize.

@karmir
I can't see that in the plugin registry.

[triforce]

That's great thanks for the help. I used Axis.update() to turn the crosshairs on and off and combined with your snippet this has given me enough to solve my initial issue.

[TorsteinHonsi]

Great, you're welcome!

[TorsteinHonsi]

Sorry, closed the wrong issue.

[Juniuz]

Hi @TorsteinHonsi I know that this issue has been closed already but I have a similar requirement using Highcharts for a multiple line series that will display the x (or y) values of where the crosshair line intersects on a series. I have updated your existing fiddle, to show multiple line series. Based on the screenshot below, is it possible to display the x and y values in a fixed tooltip simultaneously of where the crosshair line intersects on a multiple line series?

I'm using Highcharts JS v5.0.10 (2017-03-31), and wondered if there's an easy way to interpolate the x and y values on a multiple series on this version?

[pawelfus]

This issue is still open* ;)

It's not directly supported, because only one horizontal crosshair is supported (for the closest point to the mouse position). However, we can extend Highcharts methods, for example adding more crosshairs. Simple demo for you: http://jsfiddle.net/jqx7y8nn/ - this demo requires secondary yAxis (which of course can be hidden: http://jsfiddle.net/jqx7y8nn/1/).

[kakaja]

Hi! Thank you for all this fantastic work that you do!

Question: is it possible to interpolate even if the point is missing? Here: http://jsfiddle.net/3wftc5rk/2/ when the point is missing, the crosshair interpolation would stop in the middle before the missing point and restart in the middle after. Is it possible to keep interpolation without breaks?

[pawelfus]

It looks tricky - when there is no point, label is automatically hidden, so even if we calculate the value we will see blinking label which would look really bad: http://jsfiddle.net/BlackLabel/jjrhkz0k/

[JordyLeremon]

Hello, I have a problem similar to the one you posted .... I have a chart Highchart with many values ​​(contained in a database), my points are all displayed but the problem is that the values displayed on the graphs have been interpolated (they differ slightly from the values ​​contained in my database, would you have a solution to this problem please?

[sebastianbochan]

Hi @JordyLeremon,
I guess that you use Highstock, if yes, you should disable dataGrouping.

[JordyLeremon]

Hi sebastianbochan,
Thank You for this answer.... Yes I use highstock, I'll try this now

[JordyLeremon]

Thank you @sebastianbochan , that was really the problem however now he shows me the good data but makes me "spades" weird on my graphs .. would you have a solution to this problem please?

[sebastianbochan]

@JordyLeremon
Could you replicate your example as live demo on the jsfiddle.net? It will allow me to debug.

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions!