How do you override Plotly plot layout attributes with css in Dash?

Dash Python
1

I am trying to control the color of the Plotly scatterplot background via css as I would like all plots to be uniform in styling.

In a scatter plot like the following:

scatter_plot = {'data':traces_scatter,
			'layout':go.Layout(
                                                plot_bgcolor = 'lightgrey',
						paper_bgcolor = colors_scheme['background'],
						font =  {'family': font_graph['family'], 'color': colors_scheme['text'], 'size':18})}

Layout items such as plot_bgcolor and paper_bgcolor cannot be overridden with css calls to the appropriate class. In the chrome inspect, this appears to be the “bg” class and changing the “bg” class element.style fill in the chrome Inspect does change these colors but adding it to the css stylesheet does not. This is true even if the plot_bgcolor and paper_bgcolor layout calls are not defined.

css call that doesn’t effect the coloring in the plot:

.bg{
    fill: rgb(39, 59, 108);
    fill-opacity: 1;
}

Is there a way to override these Plotly layout items with css?

1 Like