Dynamically-changing X- and Y-axis Titles (with Dropdown Menu)

Dash Python
1

I have a series of graph_objects.scatter plots which I can switch back and forth between with a dropdown menu. Right now, none of these scatter plats have any x-axis or y-axis titles. I know I can add titles using update_layout, but I don’t know how to set it up so the axis titles will change dynamically based on which dropdown menu option is selected. Is it enough to just pass a list of strings for the update_layout attributes xaxis_title and yaxis_title?

2

you need a callback function to read the dropdown value, then you have to create a new plotly figure with the new layout (Y,X-axis) and then update the figure.

https://dash.plotly.com/interactive-graphing

3

OK, I think I have an idea of what I need to do, but I might need some clarification seeing as I’m not using dcc.dropdown (instead, my dropdown menu is a part of the figure’s layout).

I’m attempting to set up a callback that inputs the dcc.graph figure, runs a function that uses a series of if/else statements to change the figure’s axis titles depending on which dropdown menu is selected, then outputs the figure again. Roughly, it looks like this…

@app.callback(
    Output({'type': 'graph', 'index': MATCH}, 'figure'),
    [Input({'type': 'graph', 'index': MATCH}, 'figure')]
)
def change_axis_titles(fig):
    """
    determine which dropdown option is selected
    selected = 'dropdown option'
    Additional necessary code
    """
    if selected == """something""":
        fig = fig.update_layout(xaxis_title='Thing 1', yaxis_title='Thing 2')
    elif selected == """something else""":
        fig = fig.update_layout(xaxis_title='Thing 3', yaxis_title='Thing 4')
    elif selected == """something different""":
        fig = fig.update_layout(xaxis_title='Thing 5', yaxis_title='Thing 6')
    # et cetera
    
    return fig

Assuming I’m on the right track, I need to figure out how I can determine which dropdown menu option is currently selected.

4

Well, I don’t think you can have the same Input/Output in a callback. Second, according to your application you need a string as input instead of the figure object. You can read the “state” of the figure instead. So, if you use a input string you will be able to select if the string is equal to something, then update the layout with the figure state variable and then return the new figure object, something like this:

@app.callback(
    Output({'type': 'graph', 'index': MATCH}, 'figure'),
    [Input(div_with_string, 'value')],
    [State({'type': 'graph', 'index': MATCH}, 'figure')]
)
def change_axis_titles(option,fig):
...
5

So, if I’m understanding your suggestion correctly, I can add an html.Div element to the Dash layout with a value that corresponds to the currently-selected dropdown menu option, which then serves as the input for my callback? But how would I get that value to change dynamically whenever I select a new option in the menu? Would I need to write another function to do that? Or maybe I would need to set up a chained callback?

6

I just told you a way to update a graph from a callback. But, the way that you describe your application needs dcc.Dropdown. You said that you are not using it, so I can’t help you, sorry!

7

Correct, I’m not using dcc.Dropdown, I’m using the layout.updatemenus dropdown.