Histogram's tooltip with customdata shows information outside the tooltip box. Move it inside

I am working with a histogram and need to display some custom data in the tooltip.

This is how it currently looks:
Screenshot 2023-10-09 at 12.34.59

As you can see pointed by the red arrow, outside the tooltip, there is some text (“Simulation and Testing”) which I want to display inside the tooltip, not outside.

This is how I have defined the bar chart and the tooltip with the custom data:

The histogram:

    fig = px.bar(pivot,
                 labels={"Time order": "Phase / Month", "value": "FTE"},

                      plot_bgcolor = "rgba(0, 0, 0, 0)",
                      paper_bgcolor = "rgba(0, 0, 0, 0)",
                      xaxis = dict(
                        tickmode = 'array',
                        tickvals = tick_values,
                        ticktext = tick_text,

The tooltip:

    customdata = list(df[['Role']].to_numpy())
                "Phase / Month: %{x}",
                "Role: %{customdata}",
                "FTE: %{y:.3s}%"

Do you know how I could use the text pointed by the red arrow inside the tooltip?

HI @Ricardo, that’s actually the trace name which is shown.

Since you are using plotly.express, all traces are given a name. Just add <extra></extra> to the hovertemplate.

See also here:


That worked like a charm to hide the text from being displayed outside the box, thank you @AIMPED!

Now I’d like to display that text inside the tooltip box. Is there a way to reference that piece of data so I can include it in the tooltip?

I think you will have to include this infromation into your custom_data:

import plotly.express as px
import numpy as np

df = px.data.tips()

fig = px.scatter(df, x=df.index, y='total_bill', color='time', custom_data=['smoker', 'day'])
fig.for_each_trace(lambda x: x.update({'hovertemplate': 'itemA=%{customdata[0]}<br>itemb=%{customdata[1]}'}))