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