Charts appear outside the container and overlay other elements.
This happens when the charts are loaded, when data changes half the time it shows correctly. It also results in the correct layout if the browser window is resized.
I made a simple app to recreate the issue:
1. Expected Behaviour
2. The issue
This happens also when the tabs are not used.
I’ve tried changing the style for dcc.Graph and its parent containers but nothing seems to fix this issue. When I inspect the page in dev tools everything appears to be correct.
Code of the example app:
import dash
import dash_bootstrap_components as dbc
import dash_mantine_components as dmc
from dash import dcc, html
from dash.dependencies import Input, Output
import plotly.graph_objs as go
import pandas as pd
# Sample data
data = {
'x': [1, 2, 3, 4, 5],
'y': [10, 11, 12, 11, 10]
}
df = pd.DataFrame(data)
# Initialize the Dash app
app = dash.Dash(__name__)
dcc_graph_config = {
'responsive':True,
'editable':True,
'displaylogo':False,
}
chart_tabs = \
html.Div([
dmc.Tabs([
dmc.TabsPanel(value='chart-1', children=dcc.Graph(id='my-graph', config=dcc_graph_config)),
dmc.TabsPanel(value='chart-2', pb='xs'),
dmc.TabsList(
[
dmc.Tab(
'chart 1',
value='chart-1',
ml='auto'
),
dmc.Tab(
'chart 2',
value='chart-2',
ml='auto'
),
],
position='center',
grow=True,
)
],
value='chart-1',
),
],
style={
'width':'100%',
'height':'100%'},
)
# Define the layout of the app
app.layout = app.layout = dbc.Container([
dbc.Row([
dbc.Col([
dbc.Card([
dbc.CardHeader("Graph"),
dbc.CardBody([
chart_tabs,
dcc.Slider(id='slider', min=1, max=5, step=1, value=1),
])
])
])
])
])
@app.callback(
Output('my-graph', 'figure'),
Input('slider', 'value')
)
def update_graph(selected_value):
filtered_data = df[df['x'] <= selected_value]
figure = go.Figure(data=[go.Scatter(x=filtered_data['x'], y=filtered_data['y'])])
figure.update_layout(title=f'Data for x <= {selected_value}')
return figure
if __name__ == '__main__':
app.run_server(debug=True)