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)