Adding a graph with button presses

Dash Python
1

Is it possible to add more graph components to a Div upon clicking a button? I have in mind a column layout that starts empty. The user then can choose to add new graph via buttons or dropdowns (e.g., to choose the graph type). Is it possibly to implement this functionality? This seems to require changing html components rather than core components. Are callbacks limited to core components? If such limitations exist what do you recommend to get around them?

Thanks!

2

Callbacks can be added to any component: Core, HTML, or custom. You can modify the children of a div by adding a callback with Output('my-div', 'children') as the specified output, and then the value of your dropdowns etc. as the inputs.

E.g.:

@app.callback(Output('my-div', 'children'), [Input('my-dropdown', 'value')])
def on_dropdown_change(value):
    # Some code to choose the new child
    child = my_choice_function(value)
    return child
1 Like
3

On a related note, if there are button presses to create an additional graph, what is the correct way to handle them? I read a bit around the forum, and it seems that there is no way of creating new callbacks after the app is running. This means that all callbacks have to created upfront. How does this fact affect the way I go about designing the layout? Does that mean that I’m mostly stuck with use cases where a fixed layout is created and then all the interactivity comes from updating the state of the elements of this fixed layout? Let us say that I want to not only create a new graph with new callbacks, but also delete it. Would this be possible? This may require creating new html elements on the fly. Thanks!

1 Like
5

I’m trying to do something like this too. I want to add/remove graphs when clicking on some buttons. Did you find any solution to this?

6

Hi @Episkiliski and welcome to the Dash community :slight_smile:

This can be done with pattern matching callbacks. See more information here Pattern-Matching Callbacks | Dash for Python Documentation | Plotly

Also this post has an example of adding and deleting graphs - Pattern call-backs regarding adding dynamic graphs

2 Likes
7

Thanks, very helpful.

1 Like