Search code examples
dockerplotlystreamlit

Plotly chart formatting is different when running in Docker container

I am displaying a Plotly chart in a Streamlit app. When I run the app locally, the chart looks the way I want it to. However, when I deploy the app inside a Docker container, the chart looks different. Does anyone know why the formatting would be different when running inside a Docker container?

Here is how the chart looks when I run my app locally Python 3.9.7:

enter image description here

and here is how it looks when I run it inside the Docker container:

enter image description here

There are several differences:

  • The title font is different
  • The plot takes up a wider area in the Docker version
  • The gridlines are a different color and there are no vertical gridlines in the Docker version
  • The plot background is a different color
  • There is less vertical space between the subplots in the Docker version

It seems in the Docker container some additional styling is not being applied. Does anyone know why that might be?

Here is some Python code for a basic reproducible example:

import streamlit as st
import plotly.graph_objects as go
from plotly.subplots import make_subplots

# I tried this workaround suggested in another answer, but it didn't help
import plotly.io as pio
pio.templates.default = 'plotly'


fig = make_subplots(rows=2, cols=1)

x_line = [1, 2, 3, 4, 5]
y_line = [10, 12, 8, 15, 7]

x_bar = ['A', 'B', 'C', 'D', 'E']
y_bar = [20, 15, 25, 18, 22]

fig.add_trace(go.Scatter(x=x_line, y=y_line, mode='lines', name='Line Chart'), row=1, col=1)
fig.add_trace(go.Bar(x=x_bar, y=y_bar, name='Bar Chart'), row=2, col=1)
fig.update_layout(title_text='Subplots with Line and Bar Charts', showlegend=True)

st.plotly_chart(fig)

And here is my Dockerfile:

FROM python:3.9-slim

COPY requirements.txt requirements.txt

# Install your requirements
RUN python -m pip install --upgrade pip
RUN python -m pip install -r requirements.txt

# Copy local app directory into app direcetory in Docker container.
# The example python code above is in `app/app.py`
COPY app app

EXPOSE 8080

CMD ["python", "-m", "streamlit", "run", "app/app.py", "--server.port=8080", "--server.address=0.0.0.0", "--server.enableWebsocketCompression=false"]

requirements.txt:

streamlit==1.12.0
plotly==5.18.0
Solution

  • I was able to resolve the issue by pinning more package versions. Specifically, I had to specify altair==4.2.2, which is strange because I'm not using altair in my code.

    My requirements.txt file now looks like this:

    # requirements.txt

streamlit==1.12.0
plotly==5.18.0
altair==4.2.2