Dash layout order

Hi, I’m trying to create an app with dash with a table and some charts, but I’m having problems when I try to put two different charts next to each other. In place of be like that, the charts are one above another. One of them goes with a dropdown above. Here is the code:


app.layout = dbc.Container([
    dbc.Row([html.Img(src= "assets/logo-bb.png")
             ]),
        
        
    dbc.Row([html.H3("Youtube video statistics by streaming platform")], className= "eight columns"),

    
    
    #Dropdown with platforms to get statistics
    
    #html.Div([(dcc.Dropdown(id='linedropdown',
    #            options=[{"label": x, "value": x} for x in sorted(channels_data.Channel_name.unique())
    #            ],
    #            value='Selecciona Plataforma',
    #            multi=False,
    #            clearable=False)),
    #           html.Hr()
    #        ],className='four columns'),
    
    # Table with statistics from platform selected
    
    dbc.Row([
        dbc.Col([
        dash_table.DataTable(
                id= "datatable_id",
                data= df_videos_details.to_dict("records"),
                columns=[
                    {"name": i, "id": i, "deletable": False, "selectable": False} for i in df_videos_details.columns
                ],
                editable=False,
                filter_action="native",
                sort_action="native",
                sort_mode="multi",
                row_selectable="multi",
                row_deletable=False,
                selected_rows=[],
                page_action="native",
                page_current= 0,
                page_size= 10,
                #page_action='none',
                #style_cell={
                #'whiteSpace': 'normal'
                #},
                #fixed_rows={ 'headers': True, 'data': 0 },
                #virtualization=False,
                style_cell_conditional=[
                    {'if': {'column_id': 'Channel'},
                    'width': '20%', 'textAlign': 'left'},
                    {'if': {'column_id': 'Title'},
                    'width': '40%', 'textAlign': 'left'},
                    {'if': {'column_id': 'Published_date'},
                    'width': '10%', 'textAlign': 'left'},
                    {'if': {'column_id': 'Views'},
                    'width': '10%', 'textAlign': 'left'},
                    {'if': {'column_id': 'Likes'},
                    'width': '5%', 'textAlign': 'left'},
                    {'if': {'column_id': 'Comments'},
                    'width': '5%', 'textAlign': 'left'},
                    {'if': {'column_id': 'video_id'},
                    'width': '10%', 'textAlign': 'left'}
                
                    ])], width=12
        )

        ]),
    
    
    dbc.Row([
        dbc.Col([
            html.Div([
                html.Br(),
                html.Button('Download data', id='channels_buttom'),
                dcc.Download(id="download_cs"),
                html.Hr()])],
        width=4
        )
        ]),

    
    dbc.Row([
        dbc.Col([
            dcc.Graph(id='barchart')],
            width={'size':4}),
        dbc.Col([
            dcc.Dropdown(id='c_dropdown', placeholder='Select Period',
                options=[{'label': 'Last 7 days', 'value': 'optA'},
                            {'label': 'Last 15 days', 'value': 'optB'},
                                {'label': 'Last 30 days', 'value': 'optC'}]), 
            dcc.Graph(id='linechart')],
            width={'size':6})
        ]),

    ], fluid= True)

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

The code for the row with the two charts next to each other looks correct to me.

Did you remember to add the Bootstrap external styesheet?

app = Dash(__name__, external_stylesheets=[dbc.themes.BOOTSTRAP])