enable display of different ticktext for hover and axis when using `hovermode='x unified'`

[ambrustorok]

Hi,

Below you can read a feature request (given that this does not exist already).

The scenario

I am looking for a nice solution for displaying a hover "title" different from the ticks when using hovermode='x unified'.
Let's say that you want to display multiple time series and you have your range defined in 2 different ways. You have the timestamps, and the elapsed time. Now, you don't want to display both on the x axis to keep that clutter free, but you want to display them when hovering over the plot.

The problem

Take this code for example:

import plotly.graph_objects as go

x = ['2023-07-01', '2023-07-02', '2023-07-03', '2023-07-04']
y1 = [10, 15, 7, 12]
y2 = [5, 8, 10, 6]

ticktext = ['Day 1', 'Day 2', 'Day 3', 'Day 4']
tickvals = x  

hovertext = ['Hover 1', 'Hover 2', 'Hover 3', 'Hover 4']

fig = go.Figure()

fig.add_trace(go.Scatter(x=x, y=y1, hovertext=hovertext, name='Series 1'))
fig.add_trace(go.Scatter(x=x, y=y2, name='Series 2'))

fig.update_layout(xaxis=dict(
    tickmode='array',
    ticktext=ticktext,
    tickvals=tickvals
), 
    hovermode='x unified'
)

fig.show()

This will produce the following plot, and the problem is that I want to place "Hover 2" in place of "Day 2", while keeping "Day 2" on the x axis:

One solution

One solution I came up with was introducing a 2nd y axis, and placing the hover information there, hiding the axis and hiding the line. This works fine, however results in a hover display that looks "funny", essentially leaving some padding before the displayed text.

import plotly.graph_objects as go

x = ['2023-07-01', '2023-07-02', '2023-07-03', '2023-07-04']
y1 = [10, 15, 7, 12]
y2 = [5, 8, 10, 6]

ticktext = ['Day 1', 'Day 2', 'Day 3', 'Day 4']
tickvals = x  

hovertext = ['Hover 1', 'Hover 2', 'Hover 3', 'Hover 4']

fig = go.Figure()

fig.add_trace(go.Scatter(x=x,
                          y=y1,
                          text=hovertext,
                          yaxis='y2',
                          opacity=0,
                          showlegend=False,
                          hovertemplate = "%{text}<extra></extra>") )
fig.add_trace(go.Scatter(x=x, y=y1, hovertext=hovertext, name='Series 1', hovertemplate = "%{y:.1f}<extra></extra>"))
fig.add_trace(go.Scatter(x=x, y=y2, name='Series 2', hovertemplate = "%{y:.1f}<extra></extra>"))

fig.update_layout(xaxis=dict(
    tickmode='array',
    ticktext=ticktext,
    tickvals=tickvals
    ), 
    hovermode='x unified',
    yaxis2 = dict(
        overlaying='y',
        showticklabels=False
    ),
)

fig.show()

Proposed solution

It would be so amazing if one could just have a hoverticktext arg in the layout, that would allow for another piece of text to be set.

Imaginary example code with expected result:

import plotly.graph_objects as go

x = ['2023-07-01', '2023-07-02', '2023-07-03', '2023-07-04']
y1 = [10, 15, 7, 12]
y2 = [5, 8, 10, 6]

ticktext = ['Day 1', 'Day 2', 'Day 3', 'Day 4']
tickvals = x  

hovertext = ['Hover 1', 'Hover 2', 'Hover 3', 'Hover 4']

fig = go.Figure()

fig.add_trace(go.Scatter(x=x, y=y1, name='Series 1'))
fig.add_trace(go.Scatter(x=x, y=y2, name='Series 2'))

fig.update_layout(xaxis=dict(
    tickmode='array',
    ticktext=ticktext,
    tickvals=tickvals,
    hoverticktext = hovertext # added this imaginary line
), 
    hovermode='x unified'
)

fig.show()

And this would result in the following (edited picture) plot:

[12rambau]

I realized that the hover is using the xaxis ticks as names for title so I decided to play a bit with the axis to make it work:

import plotly.graph_objects as go

x = ['2023-07-01', '2023-07-02', '2023-07-03', '2023-07-04']
hovertext = ['Hover 1', 'Hover 2', 'Hover 3', 'Hover 4']
ticktext = ['Day 1', 'Day 2', 'Day 3', 'Day 4']
y1 = [10, 15, 7, 12]
y2 = [5, 8, 10, 6]
tickvals = x

fig = go.Figure()

fig.add_trace(go.Scatter(x=x, y=y1, name='Series 1', xaxis='x2'))
fig.add_trace(go.Scatter(x=x, y=y2, name='Series 2', xaxis='x2'))
fig.add_trace(go.Scatter(x=x, y=[None] * len(x), name='Series 1', xaxis='x'))

fig.update_layout(
    xaxis=dict(
        tickmode='array',
        ticktext=ticktext,
        tickvals=tickvals,
    ),
    xaxis2=dict(
        tickmode='array',
        ticktext=hovertext,
        tickvals=tickvals,
        overlaying='x',
        side='top',
        ticks="",
        showticklabels=False, # don't forget to make invisible
    ),
    hovermode='x unified'
)

fig.show()

Using this I get the following:

So if anyone is still looking for a workaround I have one, it's tedious, and long to srt but it's working.
Note that for the 2 thing to remain alinged (that was my use case) you might want to scale the 2 axis together with:

axis2 = dict(
    scaleanchor="x",
    scaleratio=1,
    **kwargs
)