Two graphs one Hover

Dash Python
1

I wanted to create a graph which included two graphs which have one cursor. I have been looking at https://plot.ly/dash/interactive-graphing and trying to figure out a way to seperate the scatter so that at the end you will have one x axis but two graphs one above and one below. The whole idea is to seperate two dense plots so that they are one above the other even if they are of different types, eg, a bar plot and a line plot, a scatter plot and a bar plot, or a bar and a bar depending on the data set being analysed. See image of the challenges scatter plots show when plotted on same x axis.

Untitled
Untitled.png1213×334 13.5 KB

The intention would be to have separate Y axis one above the other not side by side for easy comparison and visualization.

1 Like
2

Hey @Dee - thanks for reaching out! Check out https://plot.ly/python/subplots/#subplots-with-shared-xaxes for an example.

3

Tried the subplot function and this is what came out,
import plotly
from plotly import tools
plotly.offline.init_notebook_mode(connected=True)
trace1 = plotly.graph_objs.Scatter(
x=[1,2,3,4,5],
y=[3,4,5,2,1]
)
trace2 = plotly.graph_objs.Bar(
x=[1,2,3,4,5],
y=[500,300,90,2,0]
)
fig = tools.make_subplots(rows=2, cols=1,shared_xaxes=False, shared_yaxes=True,
vertical_spacing=0.001)
fig.append_trace(trace2, 2, 1)
fig.append_trace(trace1, 1, 1)
fig[‘layout’].update(height=600, width=600)
plotly.offline.iplot(fig, filename=‘bar-line’)

But then the dynamics I wish to see are exhibited here. The issue is in the subplot we lose the dynamics shown below

import plotly
from plotly import tools

plotly.offline.init_notebook_mode(connected=True)

trace1 = plotly.graph_objs.Scatter(
    x=[1,2,3,4,5],
    y=[300,40,520,200,122]
)
trace2 = plotly.graph_objs.Bar(
    x=[1,2,3,4,5],
    y=[500,300,90,2,0]
)
data=[trace1,trace2]

plotly.offline.iplot(data, filename='bar-line')

The challenge is making the dynamic changes yet the graph is in the form of the first graph where they are separated and with the axis x axis likely the barrier between the plots

4

What do you mean by “the dynamics”? Do you mean the labels that appear when you hover over values (“hover labels”)? Would adding a y-axis on the right side of the plot work instead? Multiple axes in Python

5

Yes, there will be two different Y axis but one x-axis. more of the setting of a shared x axis but two different y axis . The difference with those graphs is that those are on the same level. What am looking at is one above the other but when the hover moves on one it will also show values on the other as seen there but they will be on two different plots. The best example would be trials
The graph shows that when you hover ion the other the one below or above will respond.

6

Ah I see. Thanks for the clarification @Dee! I don’t think that this is possible right now. I’ve created an issue in https://github.com/plotly/plotly.js/issues/2114, feel free to chime in there or :+1: it.

While it’s not possible to show all of the hover labels, you can show a vertical line across subplots. Click on the “Toggle Spike Lines” in the mode bar to toggle this interaction mode.

32 PM
Screen Shot 2017-10-23 at 2.33.32 PM.png668×572 24 KB

7

This is a posibility, but another was using a translation. Moving one graph up by a certain factor. But then the challenge would have been that it will not reflect the value once hovered on unless one is to tember with the hover and create a separate function to alter the hover output

8

Came across this Subplots Hover problem with closest data, but am not sure of what help it can be

9

I have found a working solution and posted it on the github issue: plotly.js#2114(comment)