Legend cuts when reload page

Dash Python
1

image
image564×582 6.68 KB

What’s the reason why my graph legend is cut off when I refresh the page?

app.layout = html.Div([
        html.Div(id='graphs', children=[], style={
                 'display': 'flex', 'flex-wrap': 'wrap', 'justify-content': 'center'}),
])
@app.callback(Output('graphs', 'children'),
              Input('graphs', 'children'))
def update_extend_traces_traceselect(child):
                fig = go.Figure()
                fig.add_trace(
                    go.Bar(
                        y=[yvalue,
                        x=[date],
                        name=barname,
                    ))
            fig.update_layout(
                xaxis_title=xtitle,
                yaxis_title=ytitle,
                title=title,)
            child.append(dcc.Graph(figure=fig,
                                   }, style={'height': '550px', 'width': '550px', 'margin': '10px',
                                             'border': '1px solid'}))
 return child


<div class="flex">
  <div
    id="plotly"
    class="{% plotly_class name='OverviewChart' %} z-0 bg-white border shadow rounded w-full"
  >
    {% plotly_app name='OverviewChart' ratio=1%}
  </div>
</div>
2

@Chrollo,

Do you have any code snippets you can offer, so that we can replicate what you are doing to see if we can help?

3

I edited my question sir

4

Doing this only in Dash, I cannot reproduce the issue.

image
image603×571 3.75 KB

It looks like you are importing the chart into a flask template, if that is true.

I bet that this is causing the issue, it looks like you are trying to make that also flex, these might be causing your conflict.

You are saying you want to graph to be in the middle, but the image is being cut off when added to the template. Something like this is what I guess:

image
image1886×859 6.07 KB

Where red is what the template is pulling in.