Weird Tooltip Behavior when using color + hovertemplate on Scatter Plot

Dash Python
1

Hey all, I’m porting over an NBA Dashboard project of mine from R Shiny to Dash. I have quite a few plots and one of the things I want to implement are custom tooltips across all of them because the default col1=value1 syntax when you fill out hover_data looks awful from a user perspective imo.

So far I have almost everything working except I’m running into a weird issue when I use the color parameter. Below is a screenshot of the issue; I have no idea why this Top 5 MVP Candidate Text in Orange is popping up to the top right of the tooltip. It goes away when I remove the color parameters, but then I lose that part of the plot. I’ve tried tinkering with a dozen different things but I can’t seem to find a fix

Screenshot from 2023-10-27 19-02-13
Screenshot from 2023-10-27 19-02-13961×481 30 KB

Below is my code; again if there’s a better way to build out custom Tooltips based on data that’s already in the DataFrame then I’d be happy to change this up.

        fig = px.scatter(
            filtered_df,
            x="season_avg_ppg",
            y="season_ts_percent",
            labels={
                "season_avg_ppg": "Average PPG",
                "season_ts_percent": "Average TS%",
            },
            color="top5_candidates",
            color_discrete_map={
                "Top 5 MVP Candidate": "orange",
                "Other": "grey",
            },
        )

        fig.update_layout(legend_title_text="")

        fig.update_traces(
            hoverlabel=dict(bgcolor="white", font_size=12, font_family="Rockwell"),
            customdata=filtered_df[
                [
                    "player",
                    "team",
                    "season_avg_ppg",
                    "season_ts_percent",
                    "top5_candidates",
                ]
            ],
            hovertemplate="<b>%{customdata[0]}</b><br>"
            "%{customdata[1]}<br>"
            "<b>Average PPG:</b> %{customdata[2]}<br>"
            "<b>Average TS%:</b> %{customdata[3]:.1%}<br>"
            "<b>Type:</b> %{customdata[4]}",
        )

The actual column itself is called top5_candidates and it either has values of Top 5 MVP Candidate or Other.

Anyone have any ideas on how to fix this? Or if I’m doing something wrong & there’s a better way to implement these kinds of tooltips? Thanks!

2

No reply? I’m having the same issue. No ideas on how to fix this

3

Hi @lilycowp

Welcome to the community :tada:

The text on the right of the tooltip is the trace name and colored after the trace color.
You should be able to remove it add '<extra></extra>' at the end of the hovertemplate parameter, like for the example above:

hovertemplate="<b>%{customdata[0]}</b><br>"
            "%{customdata[1]}<br>"
            "<b>Average PPG:</b> %{customdata[2]}<br>"
            "<b>Average TS%:</b> %{customdata[3]:.1%}<br>"
            "<b>Type:</b> %{customdata[4]}<extra></extra>", # <= here

Actually you can use it to display something else than the trace name like '<extra>Value: %{x}</extra>'