Plotly Tables

[elcade]

Hello Streamlit experts!
Do you know if there is a way to make two plotly tables closer together?

Code and Screenshot attached.

Thank you so much for your help!

[snehankekre]

Hi @elcade

I was able to get them closer together with insight from a Ploty community forum thread. In fig.update_layout, I set the values of all the margin parameters to 0 and then varied the space between the tables by adjusting the height parameter.

Here’s a working example:

import streamlit as st
import plotly.graph_objects as go

fig = go.Figure(data=[go.Table(header=dict(values=['A Scores', 'B Scores']),
                 cells=dict(values=[[100, 90, 80, 90], [95, 85, 75, 95]]))])

separation = st.sidebar.slider("Separation", min_value=10, max_value=500)

fig.update_layout(
    width=1400,
    height=separation,
    margin=dict(
        l=0,
        r=0,
        b=0,
        t=0
        )
    )
    
st.plotly_chart(fig)

fig = go.Figure(data=[go.Table(header=dict(values=['C Scores', 'D Scores']),
                 cells=dict(values=[[23, 90, 80, 90], [95, 85, 75, 95]]))])

fig.update_layout(
    width=1400,
    height=100,
    margin=dict(
        l=0,
        r=0,
        b=0,
        t=0
        )
    )
   
st.plotly_chart(fig)

Here’s the output:

Does this help with your use-case?

Best,
Snehan

[elcade]

Yes! this is awesome.
Thank you @snehankekre!