 Similar to the TradingView chart above, how can I ensure that the x-axis and y-axis always display the current mouse hover position values when using spikemode=‘across’ and spikesnap=‘cursor’ in Plotly? This is particularly useful for financial chart analysis, similar to the effect I achieved using Dash’s callback function. However, it would be preferable if Plotly could support this natively. Below is a simple code snippet demonstrating how to achieve this functionality using Dash (for illustrative purposes only). ``` import dash from dash import dcc, html, Input, Output, State import plotly.graph_objects as go import numpy as np app = dash.Dash(__name__) # 生成示例数据 x = np.linspace(0, 10, 100) y = np.sin(x) fig = go.Figure(go.Scatter(x=x, y=y)) fig.update_layout( yaxis=dict( side="right", # Y 轴在右侧 spikemode="across", # 横线横穿到 Y 轴 spikesnap="cursor", # 吸附到鼠标 spikethickness=1, spikecolor="#999", showticklabels=True, # 隐藏默认刻度标签 # ticks="" # 隐藏刻度线 ), hoverdistance=100, spikedistance=1000, showlegend=True, hovermode='xy', ) app.layout = html.Div([ dcc.Graph(id="graph", figure=fig), dcc.Store(id="mouse-data") # 存储鼠标位置 ]) @app.callback( Output("graph", "figure"), Input("graph", "hoverData"), State("graph", "figure") ) def update_annotation(hover_data, fig): if not hover_data: # 无悬停时，移除注释 fig["layout"].pop("annotations", None) return fig # 获取悬停点的 Y 值 y_val = hover_data["points"][0]["y"] # 添加动态注释（右侧 Y 轴对应位置） fig["layout"]["annotations"] = [{ "x": 1, # 绘图区右侧边缘（x 轴比例 0~1） "y": y_val, "xref": "paper", # x 基于绘图区比例 "yref": "y", # y 基于 Y 轴数值 "text": f"{y_val:.2f}", # 显示 Y 值（保留2位小数） "showarrow": False, "xanchor": "left", # 文本左对齐（紧贴 Y 轴） "bgcolor": "white", # 白色背景 "bordercolor": "#ccc", # 边框颜色 "borderwidth": 1, # 边框宽度 "borderpad": 6, # 边框内边距 }] return fig if __name__ == "__main__": app.run(debug=True, port=8051) ``` related issue: https://github.com/plotly/plotly.js/issues/2026 https://github.com/plotly/plotly.js/issues/5036