How to replicate the Raised Graph (or Graph Backgrounds) From the Oil and Gas Dashboard from the Gallery

Dash Python
1

Hi, forgive me if I’m fairly new to both python and Dash but I’ve gotten this far on my dashboard:

image
image.png1255×1029 44.5 KB

I was looking at the other dashboards in the gallery and I like how the New York Oil and Gas dashboard has all of the charts and features on their own backgrounds raised off the page whereas mine are all just blended in with the background. I was trying to go through the code to do that but it was a little too hard to follow for me. Would someone be able to point me in the direction of the documentation or styling that achieves this?

Here is an image of the dashboard I’m talking about

image
image.png1185×636 31.5 KB

and here is the link to the code for it:

any help would be greatly appreciated!

2

There is a shadow around the box.
Download the full app from their Github repo,
Open the styles.css
You will find:

.pretty_container {
  border-radius: 5px;
  /*background-color: #f9f9f9;*/
  background-color: #fbb68d;
  margin:5px;
  /*margin-top: 5px;
  margin-bottom: 5px;
  margin-left: 0px;
  margin-right: 00px;*/
  padding: 15px;
  position: relative;
  box-shadow: 2px 2px 2px lightgrey;
}

I’ve built my own app on the same basis, changing just a few points here and there.

If you have more accurate questions, I can answer more precisely

3

Ahh that’s why I couldn’t find it. I dont really know anythign at all about CSS so it might be above my paygrade. I know CSS if mostly for HTML styling and they allow for the use of it in Dash but is there a Python way to implement it?

I tried to add a few of what I guess would be the relevant box related css calls to my chart like so:
html.Div([
dcc.Graph(id=‘delta_graph’),

                   ], style={'width': '48%', 'display': 'inline-block', 
                             'border-radius':'5px', 
                             'box-shadow': '2px 2px 2px lightgrey',
                             'background-color': '#fbb68d'}),

                   html.Div([
                       dcc.Graph(id='daily_running_graph'),

                   ], style={'width': '48%', 'display': 'inline-block'}),

but this is what I’m getting. Am i missing some setting or do I have to do it through CSS. (Please excuse the ignorance on CSS)

image
image.png1204×509 19.6 KB

4

Also this might not be related but what exactly is padding? What’s the difference between padding and adjusting the margin?

6

Style rules have to be camelCased if specified as style{} in Python. That is, this has to be boxShadow (see brief note in Dash HTML Components | Dash for Python Documentation | Plotly)

1 Like
7 
style={'width': '44%', 'display': 'inline-block',
                                 'border-radius': '15px',
                                 'box-shadow': '8px 8px 8px grey',
                                 'background-color': '#f9f9f9',
                                 'padding': '10px',
                                 'margin-bottom': '10px'

                                 }),

ok great resource! I’m actually getting the shadow to change with the current code above. Is there a reason for that? Would like to understand ahy

8

Was going to post something new about this and I supposed I should just let it go since it’s working but after reading the examples suggested in the styles documentation where it outlined that all python styles had to be camel cased. I’m trying to make sure I’m not doing something wrong b/c I happened to copy it from a css format but they still seem to be working.

I’ve been adjusting the margins using ‘margin-left’ and border-radius as well.

Does anyone know why they’re working when they’re not camelCased? Is it just a suggestion for consistency to differentiate between css and python styling?

Thanks!

 html.Div([
                          dcc.Graph(id='delta_graph'),


], style={'width': '44%', 'display': 'inline-block',
                                 'border-radius': '15px',
                                 'box-shadow': '8px 8px 8px grey',
                                 'background-color': '#f9f9f9',
                                 'padding': '10px',
                                 'margin-bottom': '10px',
                                 'margin-left': '10px'


                                 }),