Search code examples
pythonplotlyvisualizationdashboardstreamlit

Why is not possible to change the grey color in axes/axis title of graph in streamlit


image of the streamlit multiline graph plotted using st.write and plotly

        fig = sp.make_subplots(specs=[[{"secondary_y": True}]])

        fig.add_trace(go.Line(x=qdata.DateTime, y=qdata.a), secondary_y=False)
        fig.add_trace(go.Line(x=qdata.DateTime, y=qdata.b), secondary_y=False)
        fig.add_trace(go.Line(x=qdata.DateTime, y=qdata.c), secondary_y=False)
        fig.add_trace(go.Line(x=qdata.DateTime, y=qdata.d), secondary_y=False)
        fig.add_trace(go.Line(x=qdata.DateTime, y=qdata.e), secondary_y=True)

        fig.update_yaxes(color='#000000', title_text="<b>TEMPERATURES </b> (F)", range=[option_Y1Range0, option_Y1Range1], secondary_y=False)
        fig.update_yaxes(color='#000000', title_text="<b>MODE</b> (0 to 5)", range=[option_Y2Range0, option_Y2Range1], secondary_y=True)

        fig.update_xaxes(type='category', color='#000000')
        
        fig.update_layout(width=1800,
                          height=600,
                          font_color='#000000',
                          legend=dict(yanchor="top", orientation="h", y=0.9, xanchor="left", x=0.4)
                          ) 

        st.write(fig)

Solution

  • So, here is what I found to solve this issue. When you use st.write() or st.plotly_chart in streamlit, it picks "streamlit" theme by default and does not care about what plotly fig configuration you have for your chart.

    use st.plot_chart(fig, theme=None) and this will make the streamlit pick plotly's own theme where you will see your desired config of chart.

    Here is my updated code.

        fig = sp.make_subplots(specs=[[{"secondary_y": True}]])
    
        fig.add_trace(go.Line(x=qdata.DateTime, y=qdata.a), secondary_y=False)
        fig.add_trace(go.Line(x=qdata.DateTime, y=qdata.b), secondary_y=False)
        fig.add_trace(go.Line(x=qdata.DateTime, y=qdata.c), secondary_y=False)
        fig.add_trace(go.Line(x=qdata.DateTime, y=qdata.d), secondary_y=False)
        fig.add_trace(go.Line(x=qdata.DateTime, y=qdata.e), secondary_y=True)
    
        fig.update_yaxes(color='#000000', title_text="<b>TEMPERATURES </b> (F)", range=[option_Y1Range0, option_Y1Range1], secondary_y=False)
        fig.update_yaxes(color='#000000', title_text="<b>MODE</b> (0 to 5)", range=[option_Y2Range0, option_Y2Range1], secondary_y=True)
    
        fig.update_xaxes(type='category', color='#000000')
        
        fig.update_layout(width=1800,
                          height=600,
                          font_color='#000000',
                          legend=dict(yanchor="top", orientation="h", y=0.9, xanchor="left", x=0.4)
                          ) 
    
        st.plotly_chart(fig, theme=None)
    

    And here is the graph now. New Graph after the fix