How to Place Graphs in dbc.Carousel

📊 Plotly Python
1

I am placing some graphs in Carousel with the following syntax.
But, The graphs and Carousel div are not shown at all. The graphs are generated in plotly itself (let’s say a scatter plot )
Please suggest

Note the Carousel is placed in between other divs

html.Div([
dbc.Carousel(id = ‘my_slides’,
items=[
{“key”: “1”, “src”:
html.Div([
html.Div([dcc.Graph(id=‘graph1’)],style={‘display’: ‘inline-block’,‘width’: ‘50%’}),
],style={‘width’: ‘95%’}),
},
{“key”: “2”, “src”:
html.Div([
html.Div([
html.Div([dcc.Graph(id=‘graph2’)], style={‘display’: ‘inline-block’, ‘width’: ‘33%’}),
]),
],style={“display”: “inline-block”,‘width’: ‘100%’}),
},
],
controls=True,
indicators=True,
),

    ],style={'width': '95%'}),
2

My thoughts would be that this component is set up to receive images only for the content. It looks like you can’t add graphs as the source url, this would need to be an image.

Consider using something like tabs which allow you to click into different sections.
https://dash-bootstrap-components.opensource.faculty.ai/docs/components/tabs/

1 Like
3

Got it ! unless we convert our plot to images and redirect them as a source.

4

exactly! It depends if you want them to be dynamic and interactive or not.