Place text in front / on top of a Dash Graph object

Hello.
I need to have a message shown if a condition is met. I saw this post that deals with showing a blank graph but couldn’t figure out how to apply for my needs.
The graph’s function:

import plotly.express as px

@app.callback(
Output(“graph-figure”, “figure”),
Input(“dropdown_a”, “value”),
Input(“dropdown_x”, “value”),
Input(“dropdown_y”, “value”))

def update_graph(a, x_axis, y_axis):
df = pd.read_csv(r"C:\Users\user\project\Data.csv")
# in this case a message needs to be shown instead of the graph
if x_axis == y_axis:
# …
return px.bar(df, x=x_axis, y=y_axis)

The Graph object:

html.Div(dcc.Graph(id="graph-figure"))

If you think that more information is needed, tell me and I’ll provide it.
Thanks.

Hi,

This is how I usually do:

{
    "layout": {
        "xaxis": {"visible": False},
        "yaxis": {"visible": False},
        "annotations": [
            {
                "text": "Whatever message you want!",
                "xref": "paper",
                "yref": "paper",
                "showarrow": False,
                "font": {"size": 28, "color": "gray"},
            }
        ],
    }
}

Just return it if the condition met (updating the message, of course :smiley:).

It worked. Thanks!
Is it possible to change the position of the text? for instance, place it higher.

Sure! The text is basically an annotation, so you can set up x,y positions.

Happy that it worked!

1 Like