✊🏿 Black Lives Matter. Please consider donating to Black Girls Code today.
⚡️ Concerned about the grid? Kyle Baranko teaches how to predicting peak loads using XGBoost. Register for the August webinar!

Undesired white background in graphs

Hello.

In my current webapp, I call a function that displays multiple graphs, and I do so by using a callback. Creating My webapp is mostly charcoal colored, and in that function, I make the graphs charcoal to my desire.

However, this function takes a little bit to run, and before it is completed, the empty graph templates have a white background, making the page look funky.

I tried doing dcc.Graph(id='graph-1', style={'backgroundColor': colors['background']})to fix this, where colors['background'] is just a dictionary access. But the white backgrounds still appear. Here is an image for context. One before the function finishes, and one after.

Thank you!

You could try wrapping the graph in a dcc.Loading component. That way, it should display a little loading indicator instead of the graph. Let me know if that works!

1 Like

That worked! And it looks pretty cool… thank you! Do you know how I might be able to change the size of the loading animations? I’m sure its some string in the style dictionary, I just don’t know which one.

1 Like

Glad to hear it! Yes, the loading component should have a style property: https://dash.plot.ly/dash-core-components/loading_component

Another way around it is to use the selector .dash-spinner in your stylesheet.

1 Like

This is a good option. However, is it possible to change that white background while the graph rendering?
I don’t want to use the spinner on all graphics.

Thanks