Layout issues -- Can't figure out size

Dash Python
1

I am trying to create a single page dashboard, and having issues with the sizing of some elements (I am using dash bootstrap theme). The first one is about some cards, that are so tall, relative to the metrics in it. How can I reduce the heigt of the card? Here is the image, and then the code:

Screenshot from 2023-10-05 15-24-23
Screenshot from 2023-10-05 15-24-231123×580 13.5 KB

Code:

fig = go.Figure()

fig.add_trace(go.Indicator(
    id= "stats",
    mode="number+delta",
    value = 200,
    domain = {'row': 0, 'column': 0}, 
    delta = {'reference': 400, 'relative': True, 'position' : "top"}
)
              )

card_content = dbc.Card(
      
       [
        dbc.CardHeader("This is the header"),
        dbc.CardBody(
          [
            dcc.Graph(figure=fig)
        ],
        ),
    ],
    
)


row_1 = dbc.Row(
    [
        dbc.Col(dcc.Graph(figure=fig),),
        dbc.Col(dbc.Card(card_content, color="secondary", outline=True)),
        dbc.Col(dbc.Card(card_content, color="info", outline=True)),
        dbc.Col(dbc.Card(card_content, color="secondary", outline=True)),
        dbc.Col(dbc.Card(card_content, color="info", outline=True)),
    ],
 
)

The second issue is also relate to size, of a map. The map seems small in this view, and I want to make it full, container view. How to do that?

Screenshot from 2023-10-05 15-29-58
Screenshot from 2023-10-05 15-29-581292×447 84.1 KB

Here is the code:

df = pd.read_csv('https://raw.githubusercontent.com/plotly/datasets/master/2014_us_cities.csv')
df.head()

df['text'] = df['name'] + '<br>Population ' + (df['pop']/1e6).astype(str)+' million'
limits = [(0,2),(3,10),(11,20),(21,50),(50,3000)]
colors = ["royalblue","crimson","lightseagreen","orange","lightgrey"]
cities = []
scale = 5000

figmap = go.Figure()

for i in range(len(limits)):
    lim = limits[i]
    df_sub = df[lim[0]:lim[1]]
    figmap.add_trace(go.Scattergeo(
        locationmode = 'USA-states',
        lon = df_sub['lon'],
        lat = df_sub['lat'],
        text = df_sub['text'],
        marker = dict(
            size = df_sub['pop']/scale,
            color = colors[i],
            line_color='rgb(40,40,40)',
            line_width=0.5,
            sizemode = 'area'
        ),
        name = '{0} - {1}'.format(lim[0],lim[1])))

figmap.update_layout(
        title_text = '2014 US city populations<br>(Click legend to toggle traces)',
        showlegend = True,
        geo = dict(
            scope = 'usa',
            landcolor = 'rgb(217, 217, 217)',
        )
    )

Thank you

2

Hi @mandinka and welcome to the Dash community :slight_smile:

The size of the cards is being driven by the size of the figures. Try changing the margins, and/or height and width of the figure:


fig.update_layout(
    margin=dict(l=10, r=10, t=10, b=10),
    height=100, width=100
)

More info here:

2 Likes
3

Very helpful; Thank you