Link a data point/row in a table to a graph

Using Streamlit
1

Hello,

I am making a bar chart data visualization using plot.ly in streamlit, with every row have one bar chart.
Then, I have another view that can see all the data point using list.
So, user can pick how they see the data; (1) by using Chart, or, (2) Table.
I was wondering if currently there is feature to linked a specific data point/row to correlated chart.
I found the one that we can link dataframe to URL here, though couldn’t found something I like previously mentioned so far.

Thank you.

__

Please take a moment to search the forum and documentation before posting a new topic.
If you’re creating a debugging post, please include the following info:

  1. Are you running your app locally or is it deployed?
  2. If your app is deployed:
    a. Is it deployed on Community Cloud or another hosting platform?
    b. Share the link to the public deployed app.
  3. Share the link to your app’s public GitHub repository (including a requirements file).
  4. Share the full text of the error message (not a screenshot).
  5. Share the Streamlit and Python versions.
2

Hey there, thanks for your thoughtful question and for checking the docs and forum first! :blush: You’re asking if you can link a specific data point or row in a table to its corresponding bar in a Plotly bar chart within Streamlit, so that selecting one highlights or filters the other.

Currently, Streamlit supports interactive Plotly charts with selection events using the on_select parameter in st.plotly_chart, which lets you capture which bar (or point) a user selects and use that info to update other views, like a table. However, direct two-way linking—where clicking a row in a table highlights the corresponding bar in the chart—is not natively supported in Streamlit’s built-in st.dataframe or st.data_editor. For clickable links in tables, you can use st.data_editor with LinkColumn, but this only links to URLs, not to chart interactivity. For more advanced table interactivity (like row selection callbacks), you might consider third-party components like Ag-Grid, which can trigger Python callbacks on row selection, but this is outside the core Streamlit API. See st.plotly_chart docs and forum discussion on clickable links in tables.

Here’s a minimal example of capturing a bar selection in a Plotly chart and using it to filter a table:

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

df = pd.DataFrame({'Category': ['A', 'B', 'C'], 'Value': [10, 20, 30]})
fig = px.bar(df, x='Category', y='Value')
event = st.plotly_chart(fig, key="bar", on_select="rerun")

if event and event.selection and event.selection['points']:
    selected_category = event.selection['points'][0]['x']
    st.write("Selected:", selected_category)
    st.dataframe(df[df['Category'] == selected_category])
else:
    st.dataframe(df)

Sources: