CODEWITHSUNDEEP
pythonhtmlcssplotly-dash
Giorgia Mancini
Giorgia Mancini

Reputation: 131

Set background color in Dash Plotly

I'm working on a Dash App and I'm trying to set a background color for the entire page by creating a .css file in which I have:

body{
    background-color: darkcyan;
    margin: 0;
}

The problem is that the color is right but I still have white parts if there are graphs created with dcc.Graph

enter image description here

The color is darkcyan but it isn't working for graphs. Here is my code for the plots creation:

dcc.Graph(figure=fig_length,
          style={'width': '33%', 'display': 'inline-block', 'horizontal-align': 'right','vertical-align': 'up',"margin-top":"30px"}),
dcc.Graph(figure=fig_numbers,
          style={'width': '33%', 'display': 'inline-block',"margin-top":"30px"}),
dcc.Graph(figure=fig_clasification,
          style={'width': '33%', 'display': 'inline-block',"margin-top":"30px"}),

html.Div([
          dcc.Checklist(
          id="all-or-none",
          options=[{"label": "Select All", "value": "All"}],
          value=[],
          labelStyle={'margin-top': '10px'}
          )],style={"font-family": "Helvetica"}),
html.Div([
          dcc.Checklist(
          id='checklist_journals',
          options=[{'label': x, 'value': x, 'disabled': False}
                   for x in sorted(journals) #set in alphabetical order
                    ],
          value=sorted(journals)[0:15],
          labelStyle={'display': 'block','margin-left':'40px','margin-top':'10px'}
          )],style={'width': '33%', 'display': 'inline-block',"overflow-y":"scroll","height": "350px","font-family": "Helvetica"}), #'backgroundColor':'blue'
html.Div([dcc.Graph(id='journals_pie',figure=fig_pie_journals)],
          style={'width': '33%', 'display': 'inline-block',"font-family": "Helvetica"}),
html.Div([dcc.Graph(id='journals_graph', figure=fig1)],
         style={'width': '33%', 'display': 'inline-block',"font-family": "Helvetica"}),

I don't understand why the Checklist is coloured while the other graphs are white.

Upvotes: 0

Views: 13139

Answers (1)

Tal Folkman
Tal Folkman

Reputation: 2561

try this for graph:

colors = {
    'background': '#111111',
    'text': '#7FDBFF'
}

 dcc.Graph(
        id='example-graph-2',
        figure={
            'layout': {
                'plot_bgcolor': colors['background'],
                'paper_bgcolor': colors['background'],
                'font': {
                    'color': colors['text']
                }
            }

Upvotes: 4

Related Questions