Why I do not see the x axis when I use plotly with streamlit

Question

when I use only plotly I got this :

code :

import plotly.graph_objects as go
import plotly.express as px 
import pandas as pd


data = {'x': [1.5, 1.6, -1.2],
        'y': [21, -16, 46],
        'circle-size': [10, 5, 6],
        'circle-color': ["red","blue","green"]
        }

# Create DataFrame
df = pd.DataFrame(data)
fig = px.scatter(
    df,
    x="x", 
    y="y", 
    color="circle-color",
    size='circle-size'
)


fig.update_layout(
    {
        'xaxis': {
            "range": [-100, 100],
            'zerolinewidth': 3, 
            "zerolinecolor": "blue",
            "tick0": -100,
            "dtick": 25,
            'scaleanchor': 'y'
        },
        'yaxis': {
            "range": [-100, 100],
            'zerolinewidth': 3, 
            "zerolinecolor": "green",
            "tick0": -100,
            "dtick": 25
        },
        "width": 500,
        "height": 500
    }
)
fig.show()

but when I use it with streamlit :

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


data = {'x': [1.5, 1.6, -1.2],
        'y': [21, -16, 46],
        'circle-size': [10, 5, 6],
        'circle-color': ["red","blue","green"]
        }

# Create DataFrame
df = pd.DataFrame(data)
fig = px.scatter(
    df,
    x="x", 
    y="y", 
    color="circle-color",
    size='circle-size'
)


fig.update_layout(
    {
        'xaxis': {
            "range": [-100, 100],
            'zerolinewidth': 3, 
            "zerolinecolor": "green",
            "tick0": -100,
            "dtick": 25,
            "scaleanchor": 'y'
        },
        'yaxis': {
            "range": [-100, 100],
            'zerolinewidth': 3, 
            "zerolinecolor": "red",
            "tick0": -100,
            "dtick": 25
        },
        "width": 500,
        "height": 500
    }
)
event = st.plotly_chart(fig, key="iris", on_select="rerun")

event.selection

we got this :

why the x axis is removed when I use streamlit?

Answer 1

You can ensure that all line are shown with zeroline=True for both axes and set showline=True to make sure the y-axis and x-axis lines are always drawn.

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

data = {
    'x': [1.5, 1.6, -1.2],
    'y': [21, -16, 46],
    'circle-size': [10, 5, 6],
    'circle-color': ["red", "blue", "green"]
}

df = pd.DataFrame(data)

fig = px.scatter(
    df,
    x="x", 
    y="y", 
    color="circle-color",
    size='circle-size'
)

fig.update_layout(
    xaxis={
        "range": [-100, 100],
        'zeroline': True, 
        'zerolinewidth': 3, 
        "zerolinecolor": "green",
        "tick0": -100,
        "dtick": 25,
        "constrain": "domain",
        "showline": True
    },
    yaxis={
        "range": [-100, 100],
        'zeroline': True, 
        'zerolinewidth': 3, 
        "zerolinecolor": "red",
        "tick0": -100,
        "dtick": 25,
        "constrain": "domain",
        "showline": True
    },
    width=500,
    height=500
)



st.plotly_chart(fig, use_container_width=False)

which gives