4

When creating custom hovercards in plotly express via the custom_data/hovertemplate paradigm, the color is shown to the right of it. For example, here shows "blue" just to the right of "a=1". How can I remove the "blue"?

import pandas as pd
import plotly.express as px

df = pd.DataFrame(dict(x=["a"], y=[1], color=["blue"], hover=["a=1"]))
fig = px.bar(df, "x", "y", "color", custom_data=["hover"])
fig.update_traces(hovertemplate="%{customdata[0]}")

chart screenshot

(The colab notebook can be accessed here)

Derek O
  • 16,770
  • 4
  • 24
  • 43
Max Ghenis
  • 14,783
  • 16
  • 84
  • 132

1 Answers1

6

The hovertemplate contains a secondary box where the name of the trace is displayed. You can hide it completely by including the text <extra></extra> in the hovertemplate.

import pandas as pd
import plotly.express as px

df = pd.DataFrame(dict(x=["a"], y=[1], color=["blue"], hover=["a=1"]))
fig = px.bar(df, x="x", y="y", color="color", custom_data=["hover"])
fig.update_traces(hovertemplate="%{customdata[0]}<extra></extra>")
fig.show()

enter image description here

Derek O
  • 16,770
  • 4
  • 24
  • 43
  • How can I use a multi-index value inside the hovertemplate? I was able to set the hover_name like this hover_name=price_change24.index.get_level_values('symbol'), but can't manage to use it like that inside the template – Karl Mar 07 '22 at 15:25
  • 1
    @Karl you can probably pass those values into customdata and then access customdata from within the hovertemplate. i would be happy to give a more involved answer if you post a question with a reproducible example. comments generally aren't the best place to ask questions because people with the same question as you aren't going to be able to find comments easily – Derek O Mar 07 '22 at 16:01