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?
2 Likes
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 
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
textassigned 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")
1 Like
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
)
))
3 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:
What I want my hover to look like:
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
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:
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):
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)