Change the border color

📊 Plotly Python
1

I have already changed my background color but still have a portion of the page where the color remains white. Here is the output

image
image1600×860 69.4 KB

How can I change the color of the white line that frames the plot? Here is my code


        layout = go.Layout(
            # title="Scatter Plot",
            xaxis=dict(
                range=[start_val, end_val],
            ),
            legend=dict(
               bgcolor='rgba(255, 255, 255, 0)',
               bordercolor='rgba(255, 255, 255, 0)'
            ),
            yaxis=dict(
                range=(0, 200),
            ),
            font_color="white",
            plot_bgcolor="#25499F",
        )

        fig = go.Figure(data=[scatter_plot], layout=layout)
        fig.update_traces(line_color="#F88416")
        fig.update_xaxes(gridcolor="#015BA0")
        fig.update_yaxes(gridcolor="#015BA0")
        fig.update_layout(paper_bgcolor="#25499F")
2

Hi @peter,

Could you please try wrapping your go.Layout component with html.Div component and change its background color such as:

layout = html.Div([
             go.Layout(
            # title="Scatter Plot",
            xaxis=dict(
                range=[start_val, end_val],
            ),
            legend=dict(
               bgcolor='rgba(255, 255, 255, 0)',
               bordercolor='rgba(255, 255, 255, 0)'
            ),
            yaxis=dict(
                range=(0, 200),
            ),
            font_color="white",
            plot_bgcolor="#25499F",
        )], 
        style={'background-color':'#25499F'}
)

Cheers!

3

Thanks @Berbere Do I have to import html from dash? Like this
from dash import html

4

@peter34 yes, you need to

5

@Berbere I have done it. But when I run the code I have this error from the console
` Invalid value of type ‘dash.html.Div.Div’ received for the ‘layout’ property of
Received value: Div(children=[Layout({
‘font’: {‘color’: ‘white’},
‘plot_bgcolor’: ‘#25499F’,
‘xaxis’: {‘range’: [1685.0, 540.0]},
‘yaxis’: {‘range’: [0, 200]}
})], style={‘background-color’: ‘#25499F’})

The 'layout' property is an instance of Layout
that may be specified as:
  - An instance of :class:`plotly.graph_objs.Layout`
  - A dict of string/value properties that will be passed
    to the Layout constructor`
7

@peter34 ahh sorry, I thought it is a dash app. Then, not sure whether there is a way to get rid of that white space. One last thing that you can try is setting margins of go.Layout to zero in case it has a non-zero values as a default value…

    margin=dict(l=0, r=0, t=0, b=0),
8

Hi @peter34 ,

If you don’t need the white border frame color, you maybe need to use Dash, instead of just plotly graph objects.

The tricks is to give style on <body> tag of the page background-color:#25499F;.

You can put that style at app.index_string to give <body> tag background color .

app = Dash(__name__)
app.index_string =  """
<!DOCTYPE html>
    <html>
        <head>
            {%metas%}
            <title>{%title%}</title>
            {%favicon%}
            {%css%}
        </head>
        <body style="background-color:#25499F;">
            {%app_entry%}
            <footer>
                {%config%}
                {%scripts%}
                {%renderer%}
            </footer>
        </body>

    </html>
"""

then I put together the code use Dash and your very first post code.
(I use dummy data to create scatter plot)

from dash import Dash, html, dcc
from plotly import graph_objects as go
import numpy as np

# dummy data
rng = np.random.default_rng()
start_val = 0
end_val = 1000
x = np.linspace(start_val,end_val,100)
y = rng.integers(0,180,100)
#scatter object
scatter_plot = go.Scatter(x=x,y=y)


layout = go.Layout(
            # title="Scatter Plot",
            xaxis=dict(
                range=[start_val, end_val],
            ),
            legend=dict(
               bgcolor='rgba(255, 255, 255, 0)',
               bordercolor='rgba(255, 255, 255, 0)'
            ),
            yaxis=dict(
                range=(0, 200),
            ),
            font_color="white",
            plot_bgcolor="#25499F",
        )

fig = go.Figure(data=[scatter_plot], layout=layout)
fig.update_traces(line_color="#F88416")
fig.update_xaxes(gridcolor="#015BA0")
fig.update_yaxes(gridcolor="#015BA0")
fig.update_layout(paper_bgcolor="#25499F")

app = Dash(__name__)
app.index_string =  """
<!DOCTYPE html>
    <html>
        <head>
            {%metas%}
            <title>{%title%}</title>
            {%favicon%}
            {%css%}
        </head>
        <body style="background-color:#25499F;">
            {%app_entry%}
            <footer>
                {%config%}
                {%scripts%}
                {%renderer%}
            </footer>
        </body>

    </html>
"""

app.layout = dcc.Graph(figure=fig)

if __name__ == "__main__":
    app.run_server(debug=False)

Now the white frame is disappeared.

image
image1917×1014 103 KB

Hope this help.

1 Like
9

This is due to default margins of your browser, see also: