Search code examples
pythonplotlyplotly-pythonplotly-express

Remove color to the right of custom hovercard in Plotly Express


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)


Solution

  • 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