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

Dash Python
1

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,
                 x=pivot.index,
                 y=pivot.columns,
                 labels={"Time order": "Phase / Month", "value": "FTE"},
                 barmode="stack")

    fig.update_layout(showlegend=True,
                      legend_title_text="Roles",
                      plot_bgcolor = "rgba(0, 0, 0, 0)",
                      paper_bgcolor = "rgba(0, 0, 0, 0)",
                      xaxis = dict(
                        tickmode = 'array',
                        tickvals = tick_values,
                        ticktext = tick_text,
                        tickangle=0,
                      )

The tooltip:

    customdata = list(df[['Role']].to_numpy())
    fig.update_traces(
        customdata=customdata,
        hovertemplate="<br>".join(
            [
                "Phase / Month: %{x}",
                "<br>",
                "Role: %{customdata}",
                "<br>",
                "FTE: %{y:.3s}%"
            ]
        )
    )

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

2

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:

2 Likes
3

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?

4

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]}'}))