Plotly to show all y-values at once for a single x-value

📊 Plotly Python
1

I want to implement something like this from:

For that Hourly prices (SGD/MWh), when it is moused over, you can see all values are being displayed and tied together for a single x-value. And when mouse over either one the plot, it will show values for other plots for the same x-value, and those are highlighted.

Can you give me some examples to implement this?

2

Hi @tanthiamhuat !
The option you are looking for is the layout prop hovermode='x unified' or hovermode='x'

If you want a similar effect with the markers only on hovered points, you can use an extra scatter plot used only to display those markers, and update their positions using the hover trigger hoverData

That takes some work but here an example:

image
image1210×306 77.3 KB 

import plotly.graph_objects as go
import numpy as np
from dash import Dash, dcc, Input, Output, Patch

app = Dash(__name__)

t = np.linspace(0, 2 * np.pi, 100)

fig = go.Figure()

n_trace = 10
for i in range(n_trace):
    fig.add_scatter(mode='lines', x=t, y=np.sin(t + (i / n_trace) * np.pi), name=f'sin(t+{i}/{n_trace}*pi)')

fig.add_scatter(
    mode='markers',
    marker_size=10,
    hoverinfo="skip",
    showlegend=False,
)

fig.update_layout(xaxis_showspikes=False, xaxis_range=[0, 6], yaxis_range=[-1.1, 1.1], hovermode='x unified')

app.layout = dcc.Graph(id='graph-content', figure=fig, clear_on_unhover=True)


@app.callback(
    Output("graph-content", "figure"),
    Input("graph-content", "hoverData"),
    prevent_initial_call=True,
)
def update_markers(hoverData):
    patched_fig = Patch()

    if hoverData:
        # get the index of the hover points (same index for all traces)
        hover_index = hoverData['points'][0]['pointIndex']
        # get the colorway of the layout to catch the color of the traces
        colors = fig['layout']['template']['layout']['colorway']

        # get the position of the hovered points and the color of their trace
        markers = {'x': [], 'y': [], 'color': []}
        for i, trace in enumerate(fig['data'][:-1]):
            markers['x'].append(trace['x'][hover_index])
            markers['y'].append(trace['y'][hover_index])
            markers['color'].append(colors[i % len(colors)])

        # patch the position and color of the last trace with marker
        patched_fig['data'][len(fig['data']) - 1]['x'] = markers['x']
        patched_fig['data'][len(fig['data']) - 1]['y'] = markers['y']
        patched_fig['data'][len(fig['data']) - 1]['marker']['color'] = markers['color']
    else:
        # clear when unhover
        patched_fig['data'][len(fig['data']) - 1]['x'] = None
        patched_fig['data'][len(fig['data']) - 1]['y'] = None
        patched_fig['data'][len(fig['data']) - 1]['marker']['color'] = None

    return patched_fig


if __name__ == "__main__":
    app.run_server(debug=True)