Setting the font-size on plotly charts in streamlit

[rimano]

Summary

I am new to streamlit and I want to display plotly charts in my web app. However when I do this, the font-size of the chart is significantly decreased no matter how high I set it with go.Layout (picture below).

As you can see, everything from the title of the plot to the hovertemplate is shrinked down, making it hard to see the displayed information.

Note: I tried setting the theme attribute to None but result in dark mode is CATASTROPHIC. So I would like to know if there is a way I could increase the font size here.

Not sure this will help but here’s my code

Code snippet:

import streamlit as st
import pandas as pd
import fipran.charts as fc


st.set_page_config(layout="wide")

with st.sidebar:
    st.info('This is my first web application with Streamlit')

volve_df = pd.read_excel(
    '../raw-data/Volve production data.xlsx', sheet_name='Monthly Production Data')

fig = fc.annual_production(data=volve_df, fluid_name='oil', height=610)
st.plotly_chart(fig)

fipran is a module I created and it uses plotly for charting.

Expected behavior:

This is what I get when I use the same function in jupyter notebook (on vscode).

I want this font-size to be kept or at least have a way of increasing the font-size in streamlit.

Debug info

• Streamlit version: latest (Just installed it yesterday)
• Python version: 3.11.1
• OS version: Windows

[ferdy]

Try to adjust the size in plotly. Then let streamlit render it.

[rimano]

Hi @ferdy! Thank you for your reply.

Indeed, overridding the font-size for specific plot items worked.

Here’s the result

For those who might have a similar problem in the future, what you have to do is manually set the title_font_size, xaxis_title_font_size, xaxis_tickfont_size, hoverlabel_font_size, legend_font_size …etc.

Thanks again