Callback with one of the Input matching the Output - Automatic graph height

Dash Python
1

Hi everyone,
I’m trying to use dash to provide simple dashboards but I’m noticing some possible limitations, and I’d like to understand them (if they really exist).
The first one is about callbacks: I’d like to have one of the input matching the output. The reason why I need this is because when updating a Graph with new values, I just want to update the values but to do that I have to to return the whole figure property that embeds also the layout. This means that I have to provide also the layout in the returning value (like in the user guide examples). If i decide to change the layout, then I have to change it in multiple code positions (ie. in all the callbacks that modify the Graph value property). A bit annoying.
Just for reference this is what I do now:

@app.callback(
    Output(component_id='temp-graph', component_property='figure'),
    [Input(component_id='temp-dropdown', component_property='value')] )
def update_temp_graph(dd_values):
    graph_data = []
    for v in dd_values:
        graph_data.append({'x': x_values[v], 'y': y_values[v], 'type':'scatter', 'mode':'lines', 'name':v})
    return {'data':graph_data, 'layout': go.Layout(title = 'Temperatures', showlegend=True, margin = go.Margin(l=5, r=5, b=5, t=5, pad=4), autosize = True, height = 300)}

and what I’d like to do:

@app.callback(
    Output(component_id='temp-graph', component_property='figure'),
    [Input(component_id='temp-dropdown', component_property='value'),
    Input(component_id='temp-graph', component_property='figure')])
def update_temp_graph(dd_values, graph_figure):
    graph_data = []
    for v in dd_values:
        graph_data.append({'x': x_values[v], 'y': y_values[v], 'type':'scatter', 'mode':'lines', 'name':v})
    graph_figure['data'] = graph_data
return graph_figure

However, if i try this, after a successful server launch, when opening the dash through browser I can only read “Error loading dependencies”. Python console has no exceptions or errors.

Second question: I see that Graph component automatically resize in width when i resize the div that contains it, however it does not resize in height and so part of the Graph (the lower one) is hidden by other divs. This happens even if i do not set a fixed height to the Graph layout (in the example I provided, I set it). Overall I notice a bad interaction between children, with the Graph going behind also other components (like the dropdown)

2

You can’t provide as Input the same thing that is output. That will create infinite loop! However, you can use state=[State(component_id='temp-graph', component_property='figure')], as state only passes argument when input fires callback, doe’s not fire the callback on change.

That will be:

4 Likes
3

Yeah you are right, it would end in an infinite loop :smiley:
The solution you provided does exactly what i needed for the callback, thanks.

2 Likes
4

Could you open a new question for this and include a simple reproducable example? Thanks!