Vertical or/and horizontal line that is always shown in any hovermode

[apalchys]

It would be nice to have an option in plotly.js to toggle on a vertical or/and horizontal line across the entire plot area on hover.

The behavior of the line should be similar to the behavior of the spikes feature, but there are several differences:

• The line shouldn't depend on hovermode (as spikes do at the moment), moreover it can be used in 'x' or 'y' hovermode to compare data on hover.
• This line should be always drawn over the nearest x/y point, regardless of whether this point is within the max hover distance or not.

This feature could be very useful for financial and stock charts

Related to #2026, #1959

PR #2150

[jackparmer]

This looks very useful @apalchys !

To make sure I'm understanding the PR correctly, this new hover mode would be enabled by setting:

layout.xaxis.showcrossline and/or layout.yaxis.showcrossline to true?

The crosslinecolor, crosslinethickness, and crosslinedash could also be optionally set in the axis object for styling?

@chriddyp and @cpsievert - Any opinions on this feature from a Dash and Shiny perspective?

In particular, from the PR description #2150

• crosslines do not depend on the selected hovermode
• crosslines are always drawn over the nearest x|y point, regardless of whether this point is within the max hover distance or not
• crosslines are always drawn across the entire plot area

Thoughts @alexcjohnson ?

Seems like a reasonable addition to me.

Just curious @apalchys - in which financial software have you seen this feature? Looks like Highcharts has a similar hover line on the x-axis for example: https://www.highcharts.com/stock/demo/lazy-loading

[chriddyp]

This feature has already been requested a couple times by the dash community:

• https://community.plot.ly/t/vertical-line-on-hover/5321
  
• https://community.plot.ly/t/capturing-mouse-events-position/4616/8
  

There is this built-in Plotly "Toggle Spike Lines" function in each Graph, that does nearly what I want and is pretty fast, but not customizable.

For the api, does it make sense to match the existing shapes API for lines (https://plot.ly/python/reference/#layout-shapes-line)? that is, instead of The crosslinecolor, crosslinethickness, and crosslinedash, just:

crossline: {
    color: ...,
    width: ...,
    dash: ...
}

---

Note that this is pretty similar to spikemode: 'across'

[alexcjohnson]

The behavior of the line should be similar to the behavior of the spikes feature, but there are several differences:

It's similar enough that we should really try to extend the spikes feature rather than add a new competing one.

The line shouldn't depend on hovermode (as spikes do at the moment), moreover it can be used in 'x' or 'y' hovermode to compare data on hover.

TBH I'm not sure it's desirable for spikes to depend on hovermode, the current behavior is probably just what was most convenient to implement. I guess there's a question of what to do with horizontal spikes when you're comparing multiple points at the same x value (my gut reaction: show only one, the closest to the pointer), and we currently can't show spikes if hovermode=false because they're calculated after the hover data is determined, but that we can get around. So lets just define the behavior we want and make spikes do that.

This line should be always drawn over the nearest x/y point, regardless of whether this point is within the max hover distance or not.

Do you mean this to be linked to hover behavior (ie there's no limit to max hover distance as far as hover data AND spikes) or do you mean spikes should show up all the time (based on the nearest point) but hover data should only show up when you're within our predefined max distance? The former seems clearer to me (and notice that it would encompass spikes-only mode, if used with hovermode=false) and also very easy to implement. But if there's a good reason we can do the latter instead. Seems like we should have a layout parameter like hoverdistance the defaults to the current range but can be set to any other value (including perhaps 0 to mean no cutoff). Then if the latter behavior is necessary we could make a spikedistance as well, which normally inherits from hoverdistance. Note that these are top-level layout attributes, not per-axis attributes, as in the general case that wouldn't make any sense.

For the api, does it make sense to match the existing shapes API for lines

In retrospect we probably should have put spike styling into a sub-container, but at this point I don't think we want to change the existing spike styling API until v2.0

[jackparmer]

If interested in another comparison it looks amcharts has a version of this feature:

https://www.amcharts.com/demos/candlestick-chart/

[alexcjohnson]

it looks amcharts has a version of this feature

Interesting... per one of the pieces of #2026:

Allow hovering on arbitrary points on the plot, irrespective of whether there is data there or not.

In the amcharts version, the vertical spike is pinned to the data point while the horizontal is pinned to the cursor, even though the hover label is pinned to the data - to support that, we'd need spike positioning to be a per-axis configuration independent of hover label positioning.

[kratzert]

I personally would love to have a feature like this implemented. @chriddyp already explained in #1847 the question I raised in the dash forum. Since it seems to be a general brainstorming here again, I would like to throw in another extension of this feature that I really would appreciate: It would be wonderful if this hovering line could be extended to reach over multiple stacked subplots. Here you can see an example.
Here an example for what that might be useful. I e.g. have a model, that outputs a timeseries (e.g. of river discharge) that I want to plot against observed discharge. But then in subplots below, I would like to plot e.g. the state of the model internal snow storage, soil moisture storage etc. These usually are plotted in separate plots. But it would be very useful to have on hovering indicator line, that spans all these vertically stacked subplots and shows at each cross-section with on of the timeseries the value for this particular x-axis position.

I didn't take a into-depth look to this PR but I guess it's limited to one plot? Since this seems to be a more general discussion of where to go with this feature, I would really like to see this possibility supported as well.

[alexcjohnson]

@kratzert spikemode: 'across' already works as you suggest for stacked coupled subplots.

[alexcjohnson]

@kratzert the second part of your question (labels across all subplots) is the subject of a separate issue #2114

[apalchys]

@alexcjohnson

It's similar enough that we should really try to extend the spikes feature rather than add a new competing one.

It sounds reasonable, I think that we can do it this way and extend the existing spikes functionality by making it work in any hovermode (except for false one, of course)

Do you mean this to be linked to hover behavior (ie there's no limit to max hover distance as far as hover data AND spikes) or do you mean spikes should show up all the time (based on the nearest point) but hover data should only show up when you're within our predefined max distance? The former seems clearer to me (and notice that it would encompass spikes-only mode, if used with hovermode=false) and also very easy to implement.

At the moment, the second one is implemented. Crosslines are displayed all the time (based on the nearest point), but the hover data is displayed only when you're within predefined max distance (this is certainly discussable)

Seems like we should have a layout parameter like hoverdistance the defaults to the current range but can be set to any other value (including perhaps 0 to mean no cutoff). Then if the latter behavior is necessary we could make a spikedistance as well, which normally inherits from hoverdistance. Note that these are top-level layout attributes, not per-axis attributes, as in the general case that wouldn't make any sense.

The idea of hoverdistance and spikedistance parameters is definitely great and looks like a solution to this dilemma!

[apalchys]

@jackparmer

To make sure I'm understanding the PR correctly, this new hover mode would be enabled by setting

Yes, you understood this correctly, in the current implementation this feature can be switched on by setting the corresponding axis showcrossline attribute to true (for example, layout.yaxis.showcrossline), and then further optionally customized by crosslinecolor, crosslinethickness and crosslinedash attributes.

[apalchys]

@alexcjohnson

In the amcharts version, the vertical spike is pinned to the data point while the horizontal is pinned to the cursor, even though the hover label is pinned to the data - to support that, we'd need spike positioning to be a per-axis configuration independent of hover label positioning.

We can use one more parameter, for example mouseattached, to handle this type of behavior.
The default value will be false, and the spikes will be attached to the nearest datapoint, and on true spikes will be attached to the current mouse position. What's your thoughts?

[apalchys]

@jackparmer

in which financial software have you seen this feature? Looks like Highcharts has a similar hover line on the x-axis for example

Yes, highcharts/amcharts has this feature. Also many other less popular libraries provides this feature: e.g. http://techanjs.org or https://api.taucharts.com/basic/line.html

From my experience, users from financial area likes to have a vertical line for analyzing line/stock charts.