Update app.py

app.py

@@ -11,9 +11,11 @@ df = pd.DataFrame({
 
 # Create a Plotly Express figure for the bar chart
 fig_bar = px.bar(df, x="Fruit", y="Amount", color="City", barmode="group")
+fig_bar.update_layout(autosize=True, width=st.session_state.get('chart_width', 700))
 
 # Create another figure for a line chart
 fig_line = px.line(df, x="Fruit", y="Amount", color="City")
+fig_line.update_layout(autosize=True, width=st.session_state.get('chart_width', 700))
 
 # Session state for navigation
 if 'current_step' not in st.session_state:
@@ -23,10 +25,17 @@ if 'current_step' not in st.session_state:
 def go_to_step(step):
     st.session_state['current_step'] = step
 
+# Set the layout to wide
+st.set_page_config(layout="wide")
+
 # Layout
 st.title('Interactive Dashboard with Steps')
 
-col1, col2 = st.columns(2)
+# Set the width of the chart dynamically based on the page width
+st.session_state['chart_width'] = st.columns()[0].width
+
+# Button columns
+col1, col2 = st.columns([1, 5])
 with col1:
     # "Previous" button will be disabled on the first step
     prev_disabled = st.session_state['current_step'] == 1
@@ -41,4 +50,4 @@ with col2:
 if st.session_state['current_step'] == 1:
     st.plotly_chart(fig_bar)
 elif st.session_state['current_step'] == 2:
-    st.plotly_chart(fig_line)
+    st.plotly_chart(fig_line)