Customizing text on x unified hovering

Iā€™m using ā€œx unifiedā€ hovermode on a plot where the x-axis variable is a date. Iā€™d like to be able to customize the date format that appears when you hover over the plot (e.g. display the day of the week). I can do this pretty easily using hovertemplate for the text that appears next to each trace (there are multiple lines on the plot) but I canā€™t figure out how to customize the date format for the x unified date that appears at the top of the pop-up. Any suggestions?

1 Like

Perhaps in your case it would suffice to format the xvalues before you start plotting anything.

I have a similar problem, only that I would like to change the title of the hoverlabel completely (i.e. use ticklabels instead of x = tickvalues, which are used as a default)

There seems to be no attribute with which you can set/modify the title directly in the figure object.
Can anyone help?

You can use layout.xaxis.hoverformat :slight_smile:

1 Like

Hi Nicolas,
I currently have a similar issue as discussed above. I would like to have a plot in hovermode ā€œx unifiedā€ with a customized title of the hover label. The title of the hover label is by default set to the x-axis value. On the x-axis, I want to show only ever second x-tick and customize the x-ticklabels. I use tickvals and ticktext to achieve that. Here is the problem: When I do that, the title of the hover label is set to the value in ticktext if the corresponding tickval exists or to the original x-axis value if the corresponding tickval does not exist. I would like the hover label title to always follow the ticktext format. How can this be achieved?

1 Like

I currently have a similar issue as discussed above. I would like to have a plot in hovermode ā€œx unifiedā€ with a customized title of the hover label. The title of the hover label is by default set to the x-axis value. On the x-axis, I want to show only ever second x-tick and customize the x-ticklabels. I use tickvals and ticktext to achieve that. Here is the problem: When I do that, the title of the hover label is set to the value in ticktext if the corresponding tickval exists or to the original x-axis value if the corresponding tickval does not exist. I would like the hover label title to always follow the ticktext format. How can this be achieved?

I"m not really following the desire hereā€¦ can you provide a concrete example with a screenshot or something please?

Hi I have a similar need, i.e. to customize the title of the hover box in the ā€œx unifiedā€ hover mode.
I am visualizinf a dataframe with some numerical data and some categorical data.
Each trace is a line relevant to a numerical column
x is a timeline in seconds.
when hovering over second x Iā€™d like to see in the title of the hover box the number of the second plus the value of
some categorical columns relevant to the same dataframe row as second x.

Iā€™m not certain I have the same requirements as the other posters, but in this screenshot:

I would like to have the tooltip:

  • Not include the x-axis label (ā€œDecā€);
  • Not include the coloured blocks corresponding to the bar colours;
  • Not include the text assigned to the bars (ā€œRā€, ā€œAā€, ā€œGā€) on a separate line beneath the values;
  • And I would like to be able to modify the order of the bars in the tooltip, in this case such that the ā€œMissing dataā€ value is last.

All of this seems, in principle, as if it should be achievable using a hovertemplate but in practice it doesnā€™t seem possible. Various properties appear, from my experiments, to affect the formatting of specific parts; but not of the whole.

I havenā€™t found anything in the documentation suggesting that the hovertemplate of a stacked x-unified bar chart canā€™t be customised in those ways, and something must be assembling it in that format, but what that may be doesnā€™t seem to be specified anywhere.

So the desire, at least in my case, is to have configuration options available and documented that allow the hover box of a stacked x-unified bar chart to be customised, if only in terms of specifying which of the various components should be included or excluded.

1 Like

Did anyoune understand how to customize the title of the hover box in the ā€œx unifiedā€ hover mode?

1 Like

I would be interested in adding any units to the headline of ā€œx unifiedā€. Like meters or seconds. So far I know only how to set the precision of the number itself by using hoverformat: ā€œ.1fā€ or something similar.

How do you change the format? I get the title for the unified hover box (month) same as x-tick, but it makes no sense since it doesnā€™t change from day to day. I create this with these lines

    fig = px.line(df_age, x="date", y=['vaccinated', 'expired', 'unvaccinated'])
    fig.update_traces(hovertemplate="%{x|%d/%m} %{y}")
    fig.update_xaxes(showgrid=True, gridwidth=1, gridcolor='lightgray', range=xl, dtick="M1", tickformat="%b\n%Y")

image

I was able to format the x-axis tick labels and x-unified hover box title independently. The key is to manually set the X tick vals and tick text, then you can use the tickformat parameter to alter how the x value appears in the hover box. For example:

import plotly.graph_objects as go
import datetime as dt

xtickvals = [dt.datetime(year, 1, 1) for year in range(2020, 2030)]
xticktext = [val.strftime('%Y') for val in tickvals]  % format the ticks however you like

fig = go.Figure(layout=go.Layout(
    hovermode='x unified',
    xaxis=dict(
        tickformat='%b %Y',  # this controls the format of the x-value in the hover box
        tickmode='array',
        ticktext=xticktext,
        tickvals=xtickvals
    )
))
2 Likes

Hi, did you solve the problem?

I canā€™t take away x-axis label

samszotkowski has the best option. Iā€™ll only add that you can add params to his xaxis dict:
tickprefix: 'My label: ā€˜,
ticksuffix: ā€™ unitsā€™,
which would allow first line of hoverbox to show, for example, ā€œMy label: 100 unitsā€.
Of course when zooming on the graph, the ticks are fixed, which can be very undesirable. (Anyone know how to dynamically change ticks in array mode??)

Would be GREAT if xaxis were given a hovertemplate that works for ā€œx unifiedā€ in a future update!!

My js code, FWIW: (sorry ā€“ noticed ā€˜pythonā€™ tag after posting; should work the same with slight syntax changes)

var ticktext = ['0', '50', '100', '150', '200', '250'];
var tickvals = [0, 50, 100, 150, 200, 250];
var layout = {
    hovermode: 'x unified',
    xaxis: {
        hoverformat: ',.1f',  // or tickformat seems to accomplish the exact same when manually setting ticklabels
        tickprefix: 'Units sold: ',
        ticksuffix: ' courses',
        tickmode: 'array',
        ticktext: tickText,
        tickvals: tickVals,            
    },
};
Plotly.newPlot('mainPlot', plotData, layout);  //draw plot

Wanted to tag this again to bring it to the top.

I am essentially trying to do many of the same things NickFitz is trying to do in his post from August 5, 2021 in this same thread. For example, I cannot figure out how to: 1) swap a ā€œx unifiedā€ hovermode label (the ā€˜Decā€™ string from NickFitzā€™s post) with a custom value + variable (ideal); or 2) remove it entirely. To be clear, I do not want to change or format the tick values themselves, I want to replace or remove them from the hoverlabel only.

Hi,

What you can do is add a parameter hover_data={ā€˜data you wanna hideā€™=False}.

It will hide the particular column data on hover.

hover_data = {ā€˜Columnā€™ = False} does not appear to do anything when using hovertemplate.

Specifically, I have a dataframe with data in this format:

   Category  Percentage              Proficiency  Total Tested
0       3rd        59.0        Below Proficiency          22.0
1       3rd        27.0  Approaching Proficiency          22.0
2       3rd         5.0           At Proficiency          22.0
3       3rd         9.0        Above Proficiency          22.0
5       4th        39.0        Below Proficiency          23.0
6       4th        26.0  Approaching Proficiency          23.0
7       4th        30.0           At Proficiency          23.0
8       4th         5.0        Above Proficiency          23.0
10      5th        71.0        Below Proficiency          14.0
11      5th        15.0  Approaching Proficiency          14.0
12      5th        14.0           At Proficiency          14.0
13      5th         0.0        Above Proficiency          14.0

For each Category, I create a 100% stacked bar chart:

fig = px.bar(
    data,
    x = data['Percentage'],
    y = data['Category'].map(customwrap),
    color=data['Proficiency'],
    barmode='stack',
    text=[f'{i}%' for i in data['Percentage']],
    orientation="h",
    color_discrete_sequence=color,
    height=200,
)

I set my hovertemplate thusly:

fig.update_traces(hovertemplate="%{text}")

Other layout variables not relevant to my question:

fig.update_layout(
    margin=dict(l=10, r=10, t=20, b=0),
    font_family="Open, sans-serif",
    font_color="steelblue",
    font_size=8,
    bargroupgap = 0,
    showlegend = False,
    plot_bgcolor="white",
    hovermode='y unified',
    hoverlabel=dict(
        bgcolor = 'grey',
        font=dict(
            family="Open Sans, sans-serif", color="white", size=8
        ),
    ),
    yaxis=dict(autorange="reversed"),
    uniformtext_minsize=8,
    uniformtext_mode='hide'
)

fig.update_traces(
    textfont_size=8,
    insidetextanchor = 'middle',
    textposition='inside',
    marker_line=dict(width=0),
    showlegend = False
)

fig.update_xaxes(title="")
fig.update_yaxes(title="", ticksuffix = "  ")

What my hover looks like:
tmp1

What I want my hover to look like:
tmp2

That is: 1) I want to remove the Title Label in the upper left corner (ā€˜3rdā€™) and; 2) if possible, replace it with the data from the Total Tested column (ā€˜22ā€™). I do not want to add the Total Tested column to hovertemplate, because the Total Tested value is then repeated for each Proficiency. I just want it displayed once. At the top.

Any way to do this?

I have multiple values plotted on the y-axis. I pass in another column through custom_data which I donā€™t want to be visualised but want it to show up in the hovertext. How can I make this 3rd value appear only once?

import plotly.express as px

df = px.data.gapminder().query("continent=='Oceania'")

fig = px.line(df.loc[df['country'] == 'Australia'], x="year", y=["lifeExp", "iso_num"], color="country", title="layout.hovermode='closest' (the default)", custom_data=df[['gdpPercap']])
fig.update_layout(hovermode="x unified", )
fig.update_traces(
    mode="markers+lines",
    hovertemplate="%{y} <br> gdpPercap=%{customdata[0]}"
)

fig.show()

The hovertext looks like this
image

Expected hovertext:

1970
lifeExp = A
iso_num = B
gdpPercap = C

Arg. I have now had this come up again in another context. This time I have an x-unified hovermode for a line chart with multiple categories. Example:
tmp10

In this case, I want to do two things: 1) remove the x-axis title label (ā€˜2022ā€™); 2) add a line of text once to the bottom of the hover (below Grade 6) with some information that is stored in another column of the dataframe used to make the chart. I know that I can use custom_data and hovertemplate to add the extra information, but this ends up adding the information to each trace, which is not what I want. What I want looks something like this (although with better spacing):
tmp11

Sample MRE code (not for this exact chart, but a chart that can be used to illustrate the problem) is available in my earlier April 24 post.

Iā€™m guessing at this point that this is not currently doable? Would it be hard to fix?

Thanks,
eb

Hey Did you gert the solution to remove the x-axis title label in the upper left corner of hover? ( i.e. how did you remove the 2022 in your case)