Plotly: Unreadable text in hover info

user_3577054 0
Viewed 370

With Plotly I can generate a barplot with this code:

import plotly.graph_objects as go

trace0 = dict(
    x=list(range(24)),
    y=[163, 154, 114, 61, 32, 19, 20, 20, 26, 38, 67, 102, 132, 159],
    name="Two",
    type="bar",
    marker={"color": "rgba(81, 133, 198, 0.3)", "line": {"width": 0}},
)
trace1 = dict(
    x=list(range(24)),
    y=[0, 0, 0, 4, 19, 37, 49, 49, 39, 25, 7, 1, 0, 0],
    name="One",
    type="bar",
    marker={"color": "rgba(240, 240, 240, 1.0)", "line": {"width": 0}},
)
data = [trace0, trace1]
layout = go.Layout(
    paper_bgcolor="rgba(0,0,0,0)",
    plot_bgcolor="rgba(0,0,0,0)",
    hovermode="x",
)
go.Figure(data=data, layout=layout).update_layout(barmode="stack")

The only problem is that the label text in the hover info is unreadable, because the background color used is too close to the labels color:

enter image description here

How can I fix that? Is is possible to change the color of the hover info label text background or the color of the hover info label text?

plotly-python plotly python
2 Answers

On the plotly community forum you can see that:

The text associated to each hoverbox is in fact the trace name. By default, the line_color/marker_color is inherited by the trace name color to help users identify each scatter trace by color. You can change only bgcolor and font_color

So no, there does not seem to be a way you can change what you want here without also changing the color properties of the traces. If you really want to keep the colors and overcome the poor visibility of the info in the hoverboxes, you can change your hovermode="x" to hovermode="x unified" and get this instead:

enter image description here

user_34377870

Another alternative is to remove the extra text using hovertemplate. You can use <extra></extra> in the template in order to have it removed.

That also gives extra flexibility to control how the hover info looks like.

In example:

import plotly.graph_objects as go

trace0 = dict(
    x=list(range(24)),
    y=[163, 154, 114, 61, 32, 19, 20, 20, 26, 38, 67, 102, 132, 159],
    name="Two",
    type="bar",
    marker={"color": "rgba(81, 133, 198, 0.3)", "line": {"width": 0}},
    hovertemplate="<b>Two</b><br>%{y:,.2f} €<extra></extra>",
)
trace1 = dict(
    x=list(range(24)),
    y=[0, 0, 0, 4, 19, 37, 49, 49, 39, 25, 7, 1, 0, 0],
    name="One",
    type="bar",
    marker={"color": "rgba(240, 240, 240, 1.0)", "line": {"width": 0}},
    hovertemplate="<b>One</b><br>%{y:,.2f} €<extra></extra>",
)
data = [trace0, trace1]
layout = go.Layout(
    paper_bgcolor="rgba(0,0,0,0)",
    plot_bgcolor="rgba(0,0,0,0)",
    hovermode="x",
)
go.Figure(data=data, layout=layout).update_layout(barmode="stack")

enter image description here

user_35770540
Related