Greetings
I have a dcc.Tabs section, with two tabs. One has a graph and the other has a table.
html.Div(
className = "data_tabs",
children = [
html.H1(children = "2019 Australian Grand Prix", id = "race_title",
style = {'color': 'white', 'fontSize': '20px', 'textAlign': 'center'}),
dcc.Tabs(
id = "data_tabs",
value = "laps",
style = tabs,
children=[
dcc.Tab(
id = "laps_tab",
label = "Lap Times",
value = "laps",
selected_style=selected_tab,
children = [
dcc.Graph(id = "f1_drivers",
figure = {'layout':{
'height': 700}},
config = {
'responsive': True,
'modeBarButtonsToRemove': ["zoom2d", "pan2d", "zoomIn2d",
"zoomOut2d", "autoScale2d",
"resetScale2d"]})]
),
dcc.Tab(
id = "data_tab",
label = "Statistics and Data",
value = "data",
selected_style=selected_tab,
children = [dash_table.DataTable(
id = "quali_table"
)]
)]
)]
)
css classes (in dash file):
tabs = {
'width': '50%',
'margin': 'auto',
'padding': '6px',
'fontWeight': 'bold',
'backgroundColor': '#FBB3B3'
}
selected_tab = {
'borderTop': '1px solid #d6d6d6',
'backgroundColor': '#C10B0B',
'color': 'white'
}
css classes in main.css:
.data_tabs{
width: 100%;
margin: auto;
padding-top: 10px;
}
For the graph, I have a callback which returns a px.line object where the height of the graph is specified as height: 700, which is large, and I have even added 'layout':{ 'height': 700} in my dcc.Tab section. Upon loading the page, the graph has the desired height, but when the other tab is selected to display the table, and if we select the graph’s tab again, the graph is truncated. I have looked into using a callback for the Tabs but I want to prevent firing a callback when no data is changed in the dropdowns (in the images below). Hence I am using the children of the Tab to alternate between content.
Is there any way I can prevent the graph from truncating in height??
Upon loading:
After selecting “Statistics and Data”, then re-selecting “Lap Times”:
