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

Question

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.

score 0 · Answer 1 · answered Dec 07 '21 at 11:57

I found a solution: calling a function that returns new values for the graph's layout:

The function (can be modified, of course):

def show_message(message):
    return {
        "layout": {
            "xaxis": {"visible": False},
            "yaxis": {"visible": False},
            "annotations": [
                {
                    "text": message,
                    "xref": "paper",
                    "yshift": "90",
                    "showarrow": False,
                    "font": {"size": 20, "color": "gray"},
                }
            ],
        }
    }

Calling the function:

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:
         show_message('Message to show')
    return px.bar(df, x=x_axis, y=y_axis)

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

1 Answers1