Vertical Line On Hover

I have an application with many lines plotted against one another, and rather than the typical number comparison I’d rather use a vertical rule to visually compare many lines, something like…

Is there a straightforward way to do this in Dash? I’ve disable the hover text successfully, looking to add the line.

Thanks in advance.

There is a feature in the plotly mode bar called “spike lines” which almost does what you describe:

Does that work for you? You can set this as the default interaction mode with

figure = {
    'data': [...],
    'layout': {
        'hovermode': 'closest',
        'xaxis': {'showspikes': True}
    }
}

The style of the spikes is customizable as well: https://plot.ly/python/reference/#layout-xaxis-showspikes

1 Like

Thanks! Will use that for now, but an hline / vline type hover would be handy for a few ways of looking at data.

1 Like

Yeah, I agree that this could be helpful. I’ve created an issue in plotly.js here: https://github.com/plotly/plotly.js/issues/1959. Thanks for reporting!

1 Like

The plotly.js team just informed me about spikemode: across: https://plot.ly/python/reference/#layout-xaxis-spikemode. Seems like this would work in this case.

Any way to synchronize this across multiple plots in a subplot?

3 Likes