Black Lives Matter. Please consider donating to Black Girls Code today.
Dash HoloViews is now available! āœ…Check out the new docs.

Adding a graph with button presses

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!

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

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!