🚀 Gen 5 of the leading AI app deployment platform launches October 6. Click for the livestream.

Problem with the size of dash components

Hi guys,

I have tried to make the graph take all the place it can until the column 6 but it won’t.

here is the code I used:

import pandas as pd
import plotly.express as px
import plotly.graph_objects as go
import numpy as np
import matplotlib.pyplot as plt
import dash
import dash_core_components as dcc
import dash_html_components as html
from dash.dependencies import Input, Output
import dash_bootstrap_components as dbc
import scipy as sp
from scipy.optimize import fsolve
from scipy.interpolate import interp1d

app = dash.Dash(__name__, external_stylesheets=[dbc.themes.SOLAR],
                meta_tags=[{'name': 'viewport',
                            'content': 'width=device-width, initial-scale=1.0'}
                          ]
               )

app.layout = dbc.Container([
    
    dbc.Row(
        html.H1("Reforestation Project and VCUs",
                className='text-center text-white mb-3')
    ),
    
    
    dbc.Col(
        [
            dbc.Row(
                [
                    dbc.Col(
                        [
                            html.Label('Crediting Period'),
                            
                            dcc.Slider(
                                id='Crediting_period',
                                marks={
                                    10: '10 years',
                                    30: '30 years',
                                    },
                                step=1,
                                tooltip= {'always_visible': True},
                                min=10,
                                max=30,
                                value=15,
                                dots=False,
                                vertical = True,
                                updatemode='drag'
                            )                            
                        ],
                        width={'size':1}
                    ),
                    
    
                    dbc.Col(
                        dcc.Graph(
                            id='our_graph'),
                        width={'size':'auto'}
                    )
                ]
            ),
            
            dbc.Row(),
            
            dbc.Row(
                [
                    
                    dbc.Col(
                        [
                            html.H4("Turnover Varibables", style={'text-align': 'center'}),
                            html.Label('Estimated Annual Volume of CO2 sequestrated'),
                            dcc.Slider(
                                id='Estimated_Annual_tCO2',
                                marks={
                                    0: '0',
                                    5000: '5 000',
                                    10000: '10 000',
                                    15000: '15 000',
                                },
                                step=100,
                                tooltip= {'always_visible': True},
                                min=0,
                                max=15000,
                                value=7500,
                                dots=False,
                                updatemode='drag'),
                            html.Label('Price of Carbon Credits "$/tCO2"'),
                            dcc.Slider(
                                id='Price_tCO2',
                                marks={
                                    0: '$0',
                                    20: '$20'
                                },
                                step=0.5,
                                tooltip= {'always_visible': True},
                                min=0,
                                max=20,
                                value=10,
                                dots=False,
                                updatemode='drag'),
                            html.H4("Break Even Point", className='text-center'),
                            html.Div(id='intersection')                    
                    
                ]               
            ),
                    
                    dbc.Col(
                        [
                            html.H4("Cost Varibables", style={'text-align': 'center'}),
                            html.Label('Hectares of Land'),
                            dcc.Slider(
                                id='Hectares_of_land',
                                marks={
                                    0: '0 ha',
                                    50: '50 ha',
                                    100: '100 ha',
                                    150: '150 ha',
                                    200: '200 ha',
                                    250: '250 ha',
                                    300: '300 ha',
                                },
                                step=10,
                                tooltip= {'always_visible': True},
                                min=0,
                                max=300,
                                value=150,
                                dots=False,
                                updatemode='drag'),
                            html.Label('Variables Costs/Hectare'),
                            dcc.Slider(
                                id='Variables_costs_ha',
                                marks={
                                    0: '$ 0',
                                    1000: '$ 1000',
                                    2000: '$ 2000',
                                    3000: '$ 3000',
                                    4000: '$ 5000',
                                    5000: '$ 5000',
                                },
                                step=50,
                                tooltip= {'always_visible': True},
                                min=0,
                                max=5000,
                                value=2500,
                                dots=False,
                                updatemode='drag'),
                            html.Label('Gap Analysis Fee'),
                            dcc.Slider(
                                id='Gap_analysis_fee',
                                marks={
                                    0: '$ 0',
                                    20000: '$ 20 000',
                                },
                                step=100,
                                tooltip= {'always_visible': True},
                                min=0,
                                max=20000,
                                value=10000,
                                dots=False,
                                updatemode='drag'),
                            html.Label('Audit Fee'),
                            dcc.Slider(
                                id='Audit_fee',
                                marks={
                                    0: '$ 0',
                                    20000: '$ 20 000',
                                },
                                step=100,
                                tooltip= {'always_visible': True},
                                min=0,
                                max=20000,
                                value=10000,
                                dots=False,
                                updatemode='drag'),
                        ]
                    )
                ]
            )  
        ],
        width={'size':6}
    )
],fluid=True)



@app.callback(
    [Output(component_id='our_graph', component_property='figure'),
    Output(component_id='intersection', component_property='children')],
    [Input(component_id='Estimated_Annual_tCO2', component_property='value'),
    Input(component_id='Price_tCO2', component_property='value'),
    Input(component_id='Hectares_of_land', component_property='value'),
    Input(component_id='Variables_costs_ha', component_property='value'),
    Input(component_id='Gap_analysis_fee', component_property='value'),
    Input(component_id='Audit_fee', component_property='value'),
    Input(component_id='Crediting_period', component_property='value')]
)
    
def update_graph(Est_ann_emissions, Price, Hectares_of_land, Var_costs_ha, Gap_fee, Audit_fee, Cred_period):
    m= Cred_period
    x=np.arange(0, m+1)
    y=x*Est_ann_emissions*Price
    b= 8375 + Est_ann_emissions*0.1*x + 0.05*Est_ann_emissions*x + 0.02*Est_ann_emissions*x + 2500*x + Gap_fee + Audit_fee + Hectares_of_land*Var_costs_ha
    fig = go.Figure()
    fig.update_layout(paper_bgcolor="#000")
    fig.add_trace(go.Scatter(x=x, y=y, name='Turnover')),
    fig.add_trace(go.Scatter(x=x, y=b, name='Costs'))
    bep = interp1d(y - b, x)(0)

    return fig, bep

if __name__ == '__main__':
    app.run_server(debug=False)

If you have any idea how to fix this, thank you very much ! :wink:

Hi @marquymarc

The secuence in boostrap is:

dbc.Container([
    dbc.Row([
         dbc.Col([
         
         ]),
         dbc.Col([

         ]),
    ]),
]),

But you are using a dbc.Col after the dbc.Container:

app.layout = dbc.Container([
    
    dbc.Row(
        html.H1("Reforestation Project and VCUs",
                className='text-center text-white mb-3')
    ),
    
    # the dbc.Row ended and start with a dbc.Col([ 
    # it shoul be dbc.Row([ or a a Div.
    dbc.Col(
        [
            dbc.Row(
                [

It’s not clear how is the layout you want to have as a result, could you provide a scheme ? :thinking:

Hi, the layout I want to have as a result is this one:

This is when I inspect the web page, though I would like the graph to go all the to the 6th columns and delete de purple part of this.

Thank you so much !

The boostrap full window has 12 columns, if you set the size in 6, it will be using half of the page :thinking: :woozy_face:

I managed to figure it out, thanks though <3