Scroll to element after creating a plotly_chart

Using Streamlit
,
1

There is a problem after version 1.31. When creating plotly_chart one after another, it scrolls to the last created plot. In my case I’m trying to create 4 plots. In creation, it scrolls down to show elements while page is loading.

The events triggered in the browser are scroll and scrollEnd. I couldn’t figure it out how to prevent these scrolls. I cannot share the code due to confidentally issues. Assume this is the code:

import streamlit as st
import plotly.graph_objects as go

def create_plotly_charts(data1, data2, data3, data4):
“”"
Creates four plotly charts in Streamlit.

Args:
    data1 (list): Data for the first chart.
    data2 (list): Data for the second chart.
    data3 (list): Data for the third chart.
    data4 (list): Data for the fourth chart.
"""

# Create four columns for the charts
col1, col2, col3, col4 = st.columns(4)

# Chart 1
with col1:
    fig1 = go.Figure(data=[go.Scatter(x=data1[0], y=data1[1])])  # Replace with your chart type and data
    fig1.update_layout(title="Chart 1")
    st.plotly_chart(fig1, use_container_width=True)

# Chart 2
with col2:
    fig2 = go.Figure(data=[go.Bar(x=data2[0], y=data2[1])])  # Replace with your chart type and data
    fig2.update_layout(title="Chart 2")
    st.plotly_chart(fig2, use_container_width=True)

# Chart 3
with col3:
    fig3 = go.Figure(data=[go.Pie(labels=data3[0], values=data3[1])])  # Replace with your chart type and data
    fig3.update_layout(title="Chart 3")
    st.plotly_chart(fig3, use_container_width=True)

# Chart 4
with col4:
    fig4 = go.Figure(data=[go.Heatmap(z=data4)])  # Replace with your chart type and data
    fig4.update_layout(title="Chart 4")
    st.plotly_chart(fig4, use_container_width=True)

Example usage

data1 = [list(range(10)), [i * 2 for i in range(10)]] # Replace with your actual data
data2 = [[“A”, “B”, “C”, “D”], [15, 25, 10, 30]] # Replace with your actual data
data3 = [[“Apple”, “Banana”, “Orange”], [50, 30, 20]] # Replace with your actual data
data4 = [[1, 2, 3], [4, 5, 6], [7, 8, 9]] # Replace with your actual data

create_plotly_charts(data1, data2, data3, data4)

1 Like