Hello,
I’m trying to create a dash app that display 2 graph next to each other.
When i select another option from the scrolldown, it needs to display a new div below
It kinds of works but not really. the Simple Stock Tickers App from the dash user guide helped me a lot but I still have some bugs.
Here is a gif I did to show the problem https://imgur.com/eImDZuK
The layout is good when the page loads for the first time but then the pie chart has some problem 
When i want to update both graph with radioitems for example, the main graph is updated perfectly but the pie is going ‘behind’ the main graph and the previous one stays inplace.
Looks like it is mainly a visual problem / css problem.
I use html.Div(children=[html.Div(id='graphs'),html.Div(id='sentiment-pie'),]) in my app.layout with this css
div#graphs { display:inline-block; width:75%; } div#sentiment-pie { display:inline-block; width:25%; }
The callbacks looks like
@app.callback(Output('graphs', 'children'), [Input(component_id='sentiment_term', component_property='value'), Input('influencers', 'value'), Input('date', 'value')],
returning
graphs.append(dcc.Graph(id=each_sentiment_term, figure={ 'data': data, 'layout': go.Layout(xaxis=dict(range=[min(X),max(X)]), yaxis=dict(range=[min(Y2),max(Y2)], title='Volume', side='right'), yaxis2=dict(range=[min(Y),max(Y)], side='left', overlaying='y',title='Sentiment'),showlegend=False, )})) return graphs
@app.callback(Output('sentiment-pie', 'children'), [Input(component_id='sentiment_term', component_property='value'), Input('influencers', 'value'), Input('date', 'value')], )
pie.append(dcc.Graph(id=each_sentiment_term, figure={"data":[trace],'layout' : go.Layout( title='Positive vs Negative sentiment', font={'color':app_colors['text']}, showlegend=False)} )) return pie
Thanks very much 