Synchronizing plotly graphs

Using Streamlit
1

Hi All,
I’m converting a python created html page to Streamlit.
This page holds many plotly graphs and I have a javascript that synchronizes x-axis between them (so if I zoon in one they all change the x-axis the same).
This is the original javascript:

        document.addEventListener("DOMContentLoaded", function() {
            const graphs = document.querySelectorAll(".plotly-graph-div");
            const scrollContainer = document.querySelector(".scroll-container");
            // Synchronize zooming and panning across graphs

            graphs.forEach((graph, index) => {
                graph.on('plotly_relayout', function(eventdata) {
                    // Synchronize zooming (x-axis range)
                    const xRange0 = eventdata['xaxis.range[0]'];
                    const xRange1 = eventdata['xaxis.range[1]'];
                    if (xRange0 !== undefined && xRange1 !== undefined) {
                        graphs.forEach((otherGraph, otherIndex) => {
                            if (otherGraph !== graph) {
                                Plotly.relayout(otherGraph, {
                                    'xaxis.range': [xRange0, xRange1]
                                });
                            }
                        });
                    }
                });
            });

            // Synchronize scrolling across all graphs
            scrollContainer.addEventListener('scroll', function() {
                const scrollPosition = scrollContainer.scrollLeft;
                graphs.forEach((graph, index) => {
                    graph.parentElement.scrollLeft = scrollPosition;
                });
            });
        });

I created a simple streamlit script

   import streamlit as st
   import plotly.graph_objects as go
   from streamlit_javascript import st_javascript
   # from streamlit_plotly_events import plotly_events

    # Create two Plotly graphs with the same uirevision
    fig1 = go.Figure(data=go.Scatter(x=[1, 2, 3, 4], y=[10, 11, 12, 13], mode='lines'))
    fig2 = go.Figure(data=go.Scatter(x=[1, 2, 3, 4], y=[4, 5, 6, 7], mode='lines'))
    # Configure both graphs to share the same x-axis range and uirevision
    fig1.update_layout(
           title=dict(text="AAA", x=0.105),
          xaxis=dict(range=[0, 5], autorange=False)
     )
    fig2.update_layout(
           xaxis=dict(range=[0, 5], autorange=False)
    )

    # Display both graphs with unique keys
   st.plotly_chart(fig1, use_container_width=True, key="graph1")
   st.plotly_chart(fig2, use_container_width=True, key="graph2")

I saw that the graph class type is not the same.
I’m tried all kinds of methods to try and incorporate a modified version of the script without success.
Is there a way of doing this?
I can’t use subplots.
Thanks

1 Like