Search code examples
pythonplotlyplotly-python

Plotly: Unreadable text in hover info

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?

Solution

  • 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