I have created a flask app with some of plotly.offline charts and tables and set the output_type =“div” the size I put auto, so I can make responsive by changing the container(.js-plotly-plot .plot-container)size at CSS and this the only I fund working with python flask and HTML. it’s actually working perfectly when I change the size of the except when I refresh the page or open the page on a smaller size. In this case, the width not taking the right size of the container and back to the default which I think 700px and that happens on all my charts and tables. I have the code for the charts below. Is there anyway to overcome this issue?
#python view
def create_bar():
expenses_bars =
months =
income_bars =
total_income = Income.query.with_entities(func.sum(Income.income_amount_month)).
filter_by(budget_id=selected_budget()).first() # query total income for the specified budget
for i in total_expenses_month(): # call total monthly expenses method
expenses_bars.append(i[0])
income_bars.append(total_income[0])
months.append(f"{i[1]}-{i[2]}")
fig = plot({“data”:
[go.Bar(
x=months,
y=income_bars,
name=‘Total Income’,
marker_color=’#5fbae9’
),
go.Bar(
x=months,
y=expenses_bars,
name=‘Total Spend’,
marker_color=‘red’
)], “layout”: go.Layout(margin=dict(t=30, b=20, l=50, r=50))}, output_type=‘div’)
return fig
@users.route(’/dashboard’, methods=[‘GET’, ‘POST’])
def user_dashboard():
pie = create_pie()
bar = create_bar()
expenses_tab = expenses_table()
return render_template('user_dashboard.html', pie_div=Markup(pie), bar_div=Markup(bar),
expenses_tab=Markup(expenses_tab))
css
.pie-div .js-plotly-plot .plot-container {
width: 500px;
height: 500px;
}
.maindiv .pie-div {
width: 500px;
height: 500px;
left: 15px;
top: 100px;
padding: 0;
}
