Plotly interface with multiple crosslinked lineplots

[Simon5]

Hello:)

I am trying to recreate a Interface in streamlit which my predecessor built with plotly in HTML.

https://run.gfstool.com/output/GFS_IndicatorsTool/get_Indicators/cbcdd4cb62740556029a6f0c7b5df72c/interactive_plot_copy.html

My question is if there is a proper way to crosslink different line plots or even a folium map with each other. The possibilities i found until now (plotly_events and st.plotly_chart) do not seem to properly work with line charts.

Does anybody know of some approach that i overlooked or other possibilities to achieve this kind of interface? Maybe i have to create it outside of streamlit and then link to it?

Best wishes
Simon

[Encrypt]

You could also utilize combinations of on_select callbacks in st.plotly_chart to update the figures of other charts.

import streamlit as st
import numpy as np
import plotly.figure_factory as ff

# Add histogram data
x1 = np.random.randn(200) - 2
x2 = np.random.randn(200)
x3 = np.random.randn(200) + 2

# Group data together
hist_data = [x1, x2, x3]

group_labels = ['Group 1', 'Group 2', 'Group 3']


def on_select_callback_1():
    # Access the selected data
    chart1 = st.session_state.distplot1
    selected_data = chart1.selection

    # Do something with the selected data
    # For example, update the second chart based on the first chart's selection
   
    

def on_select_callback_2():
    # Access the selected data
    chart2 = st.session_state.distplot2
    selected_data = chart2.selection

    # Do something with the selected data
    # For example, update the first chart based on the second chart's selection


# Create distplot with custom bin_size
if 'fig1' not in st.session_state:
    
    st.session_state.fig1 = ff.create_distplot(
        hist_data, group_labels, bin_size=[.1, .25, .5])

if 'fig2' not in st.session_state:
    st.session_state.fig2 = ff.create_distplot(
        hist_data, group_labels, bin_size=[.2, .3, .6])

# Plot!
st.plotly_chart(st.session_state.fig1, on_select=on_select_callback_1, key="distplot1")
st.plotly_chart(st.session_state.fig2, on_select=on_select_callback_2, key="distplot2")

[Simon5]

Thanks for the Feedback! This is a good approach but it doesn’t seem to work for line charts since the selection output stays empty after interaction with the linechart. Maybe i am missing something?

Example chart:

import streamlit as st
import plotly.express as px
import pandas as pd

# Create example dataset
data = {
    'Year': ['2000', '2000', '2000', '2010', '2010', '2010', '2020', '2020', '2020'],
    'Value': [100, 150, 200, 110, 160, 210, 120, 170, 220],
    'pop': ['pop_1', 'pop_2', 'pop_3', 'pop_1', 'pop_2', 'pop_3', 'pop_1', 'pop_2', 'pop_3']
}

habitat_area = pd.DataFrame(data)

# Create line plot
fig = px.line(habitat_area, x='Year', y='Value', color='pop', title='Habitat Area')

# Display plot in Streamlit
event = st.plotly_chart(fig, key="habitat", on_select="rerun")

# Access the selected data
if event:
    selected_data = event.selection
    st.write("Selected data:", selected_data)

[Encrypt]

A new event is triggered after a selection is made on the chart. In case of a line chart, there is no option to make a selection directly on the chart itself. Additionally, making a selection in the legend does not initiate any events, even for other types of charts.