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
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!