I got most it working with your help, except hovering part.
Here is my code
from dash import Dash, html, dcc, Output, Input, Patch
import os.path
import plotly.graph_objs as go
import plotly.offline as py
import datetime
import calendar
import pandas as pd
import numpy as np
import sys
import openpyxl
from ipywidgets import interactive, HBox, VBox
from datetime import date, datetime
from datetime import timedelta #New addition
from os.path import exists
from colorama import Fore, Back, Style
from openpyxl import Workbook, load_workbook
from pandas_datareader import data as pdr #8/6/23 Vivek R. Dabholkar
from plotly.subplots import make_subplots
import dash
#
spath = 'C:\\Daily_Stock_Report\\Performance\\Excel\\'
filename = spath + "Indices.xlsx"
df = pd.read_excel(filename, sheet_name="Close", index_col=None)
#
df['Date'] = pd.to_datetime(df.Date)
df['month'] = df['Date'].dt.strftime('%b')
df['year'] = df['Date'].dt.strftime('%Y')
#
# dummy figure
fig = go.Figure(go.Scatter(x=df["^TNX"], y=df["^GSPC"],mode='markers',marker_color="red"))
fig.update_yaxes(type="log")
fig.update_layout(title_text="S&P500 vs 10Yr Treasuries",
title_font_size=14)
#
fig1 = go.Figure(go.Scatter(x=df["Date"], y=df["^GSPC"],mode='markers',marker_color="green"))
fig1.update_yaxes(type="log")
fig1.update_layout(title_text="S&P500 vs Time",
title_font_size=14)
fig2 = go.Figure(go.Scatter(x=df["Date"], y=df["^TNX"],mode='markers',marker_color="blue"))
fig2.update_layout(title_text="^TNX vs Time",
title_font_size=14)
#
ptitle = "Linked_Plots"
figname = spath + ptitle + ".html"
# print('Writing ', figname)
fig.write_html(figname)
def v_line(x):
shapes = [
{'type': 'line',
'x0': x,
'x1': x,
'xref': 'x',
'y0': 0,
'y1': 1,
'yref': 'y domain'
}
]
return shapes
def h_line(y):
shapes = [
{'type': 'line',
'x0': 0,
'x1': 1,
'xref': 'x domain',
'y0': y,
'y1': y,
'yref': 'y'
}
]
return shapes
app = dash.Dash(
__name__,
external_stylesheets=[
"https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css",
]
)
app.layout = html.Div([
html.Div(
className='row',
children=[
html.Div(
className='col-6',
children=dcc.Graph(id='graph_1', figure=fig)
),
html.Div(
className='col-6',
children=dcc.Graph(id='graph_2', figure=fig1)
)
]
),
html.Div(
className='row',
children=[
html.Div(
className='col-6',
children=dcc.Graph(id='graph_3', figure=fig2)
),
html.Div(
className='col-6',
)
]
)
])
@app.callback(
Output('graph_2', 'figure'),
Output('graph_3', 'figure'),
Input('graph_1', 'hoverData'),
prevent_initial_call=True
)
def update(hoverData):
# get hover coordinate in x direction
x = hoverData['points'][0]['x']
y = hoverData['points'][0]['y']
# create patches
patch_x = Patch()
patch_y = Patch()
# add lines
patch_x['layout']['shapes'] = v_line(x)
patch_y['layout']['shapes'] = h_line(y)
return patch_x, patch_y
if __name__ == '__main__':
app.run_server(debug=False)
